Infinite Scroll

7911 ワード

Webサイトの投稿リストでは、投稿数が増加すると、当然ページング処理が行われます.
その中のInfinite Scrollについて知りました.

初期画面

最初は、5つのdiv要素が画面に表示されます.

インプリメンテーション

実現方式はスロットルを採用した.スクロールするたびに不要なイベントが実行され、throttlingはイベントを一定期間実行できません.
ajaxを使用してデータをロードしようとしたが、準備ができていないため、下にスクロールすると5つのdiv要素が追加されます.

export const throttling = (fn, time) => {
  let timer;

  return () => {
    if (!timer) {
      timer = setTimeout(() => {
        fn();
        timer = false;
      }, time);
    }
  };
};

簡単にスロットル機能を実現しました.
Windowsにスクロールアクティビティを追加します.以下の方法でつけることができます.

window.addEventListener(
  "scroll",
  throttling(() => {
    if (window.scrollY + window.innerHeight >= document.body.offsetHeight) {
      main.render();
    }
  }, 700)
);

(文書全体の長さはdocument.body.offsetHeight、スクロール長はscrollY、ユーザー画面はinnerHeightです.)
現在のユーザー画面の高さとスクロール長の合計がドキュメント全体の長さ以上である場合は、要素を追加します.
次に、最後までスクロールする場合は、要素を追加するために論理を記述する必要があります.

render() {
    this.target.innerHTML += Array.from({ length: 5 }).reduce(
      (acc, cur, index) => {
        acc += `<div class=board>${this.maxId}번째 게시글입니다.</div>`;
        this.maxId += 1;
        return acc;
      },
      ``
    );
  }

ここでちょっと待ってください。

scrolly、innerHeight、offsetHeightはそれぞれ何の意味がありますか?

scrollY

window.scrollYは、垂直スクロールバーの移動量を画素単位で表す.
現在のビューポートの上部にあるY座標を返し、ビューポートがない場合は0を返します.
ビューポートとは、ブラウザ内のスクリーンサイズを指し、メニューバーやタブ領域を除く純粋なスクリーン領域です.
参考までにwindow.pageYOffset === window.scrollY;//trueです.
ブラウザ間の互換性のために、scrollyではなくpageYOffsetを使用することをお勧めします.△やはりIEは問題です.