むげんたわみ

無限スクロールはページネーミングの一種です.
通常は、ユーザーに便利な文章リストを提供する方法の1つです.

ページボタンをクリックして次の記事のリストを表示したり、別の記事に移動したりするのではなく、
ユーザーがスクロールすると、クエリーは自動的に停止します.
ページの下に文章の形式を貼り直します.
例えば、フェイスブック、twitter、instagramがあります.
しかし無限スクロールの欠点もある.

ユーザーは現在の位置を知るのが難しく、漂流感があります.

に必要な場所にある資料を見つけるのは難しい.

ページのヘッダー部分は見えません.

編の文章を読んだ後、後ろに歩くと元の位置に戻るのは難しい.

したがって,UXを考えると,適切なページで実現することが重要である.
だから私は無限スクロールでコメント部分を表現することにしました.

だからどうしよう。

私も最初は知らなかったので、3時間ほどシャベルをしました.
でも次はこんなミスがないように書いてほしいです.
私はまだニワトリなので、Intersection Observerのような恐ろしい友達よりも、伝統的な方法でReact Infinite Scroll Componentと2回実現することにしました.
Intersection Observer(クロスオブザーバー)?
IntersectionObserver(クロスオブザーバAPI)は、ターゲット層とターゲット層の親層または親層のビューポートが交差する箇所を非同期で観察するAPIである.
ビューポートは、現在の画面に表示されているポリゴン(通常は長方形)の領域です.Webブラウザとは、現在のウィンドウでドキュメントを表示できる部分です(フルスクリーンの場合はフルスクリーン).スクロールする前に、ビューポートの外の内容は表示されません.
MDN
つまり、Intersection Observerは、画面(ビューポート)に指定したターゲット要素が表示されているかどうかを観察するAPIです.
もちろん、Intersection Observerを使用する場合は、エスケープなどの操作は必要ありません...もう一度勉強して、後で実施して、伝統的な方法に従って、以下のようにします.

ページの末尾、すなわちコンテンツの末尾が検出すると、

.

は、次の記事またはリストに対応するクエリ文をページの最後に戻します.

コンテンツのサイズ

もしそうであれば、ページの最後に到達した領域を知るには、現在のページのサイズとスクロールの位置に注意してください.そして尾の位置が必要です.
簡略化するには、次のページを考慮します.

<div class="infinite_Wrapper">
<div class="contents">
헤더
</div>
<div class="contents">
바디
</div>
</div>
<div class="end">
</div>

https://javascript.info/size-and-scroll
JavaScript画面のすべての部分のサイズ(scrollHeight)
画面に表示されない部分にスクロール
スクロールバースペース以外の部分(clientHeight)を定義します.

let scrollHeight = document.documentElement.scrollHeight
let scrollTop = document.documentElement.scrollTop
let clientHeight = document.documentElement.clientHeight

ブラウザごとにエクスポートされるサイズ基準が間違っていることが問題です
Document sizes are a browser compatibility nightmare because, although all browsers expose clientHeight and scrollHeight properties, they don't all agree how the values are calculated.
There used to be a complex best-practice formula around for how you tested for correct height/width. This involved using document.documentElement properties if available or falling back on document properties and so on.
The simplest way to get correct height is to get all height values found on document, or documentElement, and use the highest one.
https://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript
だから、math.max()関数を使用してbodyのジオメトリ値と比較し、2つの値の大きな値に置き換えます.

 let scrollHeight = Math.max(
      document.documentElement.scrollHeight,
      document.body.scrollHeight
    );
    let scrollTop = Math.max(
      document.documentElement.scrollTop,
      document.body.scrollTop
    );
    let clientHeight = document.documentElement.clientHeight;

scrollTop+clientHeightの値がスクロール高さ以上の場合.
これは、内容が尽きたことを意味します.if (scrollTop + clientHeight >= scrollHeight) このとき、私たちは欲しいクエリー文を飛ばします.もちろん、私は今Graphqlを使用しているので、クエリーを使用して解放する必要があります.

const infiniteScrolling = () => {
    let scrollHeight = Math.max(
      document.documentElement.scrollHeight,
      document.body.scrollHeight
    );
    let scrollTop = Math.max(
      document.documentElement.scrollTop,
      document.body.scrollTop
    );
    let clientHeight = document.documentElement.clientHeight;

    if (scrollTop + clientHeight >= scrollHeight) {
      if(data.fetchBoardComments.length % 10 !== 0)
      return;
      fetchMore({
        variables: {
          boardId : String(router.query.id),
          page: (data.fetchBoardComments.length / 10) + 1
        },
        updateQuery: (prev, {fetchMoreResult}) => {
          if (!fetchMoreResult) 
          return prev;
  
          return Object.assign({}, prev, {
            fetchBoardComments: [
              ...prev.fetchBoardComments,
              ...fetchMoreResult.fetchBoardComments
            ]
          });
        }
      })
    }
  };

FetchMoreの動作がおかしいのか、ユーザーStateがそこで認識できないのか、ユーザーStateを使用してpageの値を変更すると、クエリは無限に消えてしまいます.
したがって、入力された値がBackendで定義された個数に達すると、そのまま入力して次のページに移動します.
1ページに10個のコメントが読み込まれるので、残りの10個があれば次のページに進み、なければ次のページに進み、本格的なコメントがなければreturnで関数を終了します.

boardComment.presenter

次に、無限スクロールのdivを描き、重複スタイルを適用するコンポーネントを追加し、onScrollイベントを使用して関数を適用します.
いくつかのスタイル上の問題があるのでoverflowY:見えないところにスクロールを適用するのは少し残念ですが、よく機能しています.

うまく機能していますが、末尾の待機中にロード部分が別途割り当てられていないため、ある領域が到着したときにクエリーを実行し続けるため、残念ながらロードを継続します.その部分はまだ修正が必要だ

react-infinite-scroller

react-無限-scrollerをインストールすると、
このセクションをpresenterからロードして使用するだけです.

//함수부분
 const onLoadMore = () => {
    if(data.fetchBoardComments.length % 10 !== 0)
    return;

    fetchMore({
      variables: {
        boardId : String(router.query.id),
        page: (data.fetchBoardComments.length / 10) + 1
      },
      updateQuery: (prev, {fetchMoreResult}) => {
        if (!fetchMoreResult) 
        return prev;

        return Object.assign({}, prev, {
          fetchBoardComments: [
            ...prev.fetchBoardComments,
            ...fetchMoreResult.fetchBoardComments,
          ]
        });
      }
    })

  }

コンテナで関数を定義すると、

<InfiniteScroll
     pageStart={0}
     loadMore={onLoadMore}
     hasMore={true || false}
     height={1000}
          > }
     
     ...<반복되는 스타일>

定義＃テイギ＃
ライブラリは便利ですが、自分で実現してみたいです.