Infinite Scroll
Webサイトの投稿リストでは、投稿数が増加すると、当然ページング処理が行われます.
その中のInfinite Scrollについて知りました.
最初は、5つのdiv要素が画面に表示されます.
実現方式はスロットルを採用した.スクロールするたびに不要なイベントが実行され、throttlingはイベントを一定期間実行できません.
ajaxを使用してデータをロードしようとしたが、準備ができていないため、下にスクロールすると5つのdiv要素が追加されます.
Windowsにスクロールアクティビティを追加します.以下の方法でつけることができます.
(文書全体の長さは
現在のユーザー画面の高さとスクロール長の合計がドキュメント全体の長さ以上である場合は、要素を追加します.
次に、最後までスクロールする場合は、要素を追加するために論理を記述する必要があります.
scrolly、innerHeight、offsetHeightはそれぞれ何の意味がありますか?
現在のビューポートの上部にあるY座標を返し、ビューポートがない場合は0を返します.
ビューポートとは、ブラウザ内のスクリーンサイズを指し、メニューバーやタブ領域を除く純粋なスクリーン領域です.
参考までに
ブラウザ間の互換性のために、scrollyではなくpageYOffsetを使用することをお勧めします.△やはりIEは問題です.
clientHeight
scrollHeight
最後までスクロールするたびにelementが追加されます.
その中の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は問題です.
innerHeight
window.innerHeight
は、ビューポートの横スクロールを含む長手方向の長さである.offsetHeight
HTMLElement.offsetHeight
は、要素の高さ(垂直塗りと枠線を含む)を整数に戻します.垂直の長さを求める別の方法、例えばオフセットHeight。
clientHeight
element.clientHeight
は、オフセットHeightのように要素の高さを返しますが、paddingのみが含まれ、borderおよびrollは含まれません.scrollHeight
element.scrollHeight
は、要素コンテンツの全体的な高さを表し、オーバーフローして見えないコンテンツを含む.結果
最後までスクロールするたびにelementが追加されます.
Reference
この問題について(Infinite Scroll), 我々は、より多くの情報をここで見つけました https://velog.io/@jeong_eeeun/Infinite-Scrollテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol