TIL. infinity scroll

Today I learn

infinity scroll with tabs

前回の投稿に続いて、無限大のスクロールを書きたいです.
私が欲しい無限スクロールは特定の箱の中で無限スクロールを続けなければならず、位置全体を100 vhに固定しなければならない.そのため、転がっても高さ全体が変わらず、箱の中で転がるしかありません.
私がプロジェクトをしていたときに参考にしたウォチャフィディアは、当初スクロールすると箱の中で無限スクロールを実現するのではなく、画面全体の無限スクロールを実現していました.だからスクロールすると内容が上がり、本格的なオーバーフロー:hidden or rollではなくdiv boxで上を覆うので、実際には見えませんが、下は消えていません.
実はそのように体現しても見ることができて、問題はありませんが、私個人はよく体現したいと思っています.
だから私はheight全体をあげて、その箱の中で転がるだけで、転がって地面に着いたとき、私が押したラベルをqueryStringに直接入れて、fetchを要求します.
もちろん、私はバックエンドとoffsetとlimitについて相談しましたが、データが多くないので5つお願いしました.
また,送信可能なデータがない場合に無限スクロールを継続するために,最初からデータを再送するという論理が構成されている.
最後に直接ロードするのではなく、少し時間間隔をあけてfetchが行われているのを見せるのでsettimeout 1000 msをあげました.

// ## SCROLL이 바닥에 닿았을때 무한스크롤 함수
  handleScroll = e => {
    const { scrollTop, clientHeight, scrollHeight } = e.target;
    const { count } = this.state;
    const query = `limit=${LIMIT}&offset=${count + 1}`;

    if (scrollTop !== 0 && scrollTop + clientHeight >= scrollHeight) {
      // 몇번 스크롤이 바닥에 닿았는지 알아야 그에 맞는 데이터를 보내주기 때문에 count를 만들어서 사용했다.
      this.setState({
        count: count + 1,
      });
      setTimeout(() => {
        fetch(
          `${privateAPIKEY}?category=${
            this.state.tabLists[this.state.toggleStateNum]
          }&${query}`,
          {
            headers: {
              Authorization: localStorage.getItem('token'),
            },
          }
        )
          .then(res => res.json())
          .then(res => {
          //데이터가 5개만 보이도록 하는게 아닌 앞에서부터 쌓이게 해줘야한다.
            this.setState({
              contents: [...this.state.contents, ...res.results],
            });
          });
      }, 1000);
    }
  };

ランダムにcountを行い、他のラベルを押すとロジックを構成し、countを0で再開します.
今回の無限スクロールで混同されているのは、2～3回スクロールして別のラベルをクリックすると、このラベルは5つのfetchで表示されますが、非同期のためcountが0になる前にfetchは15個20個表示されます.
だからscrollTop!==0時にもう一つの条件を別のラベルに入力すると、scrollTopは論理を構成します:もちろん0で、その時に取らないでください.
最後にロード中...私はもともと1つを作成したいと思っていましたが、最初はコンテンツリストをliにマッピングし、スクロールした箱にロードを入れました.それが消えたとき、スクロールは再び地面にぶつかるので、2回取りました.
つまり、1回スクロールすると、2回キャプチャされる場合があります.
この部分は論理を再組織して実現するつもりです.
それもいい経験でした!すべて私の財産です!ほほほ