JavaScript での無限スクロール
無限スクロールは、ユーザーがページを下にスクロールするときにコンテンツを継続的にロードする Web デザイン手法です。 これにより、ページネーションの必要がなくなります。
Twitter などのソーシャル ネットワーキング サイトでエンドレス スクロールが成功したことで、この手法が普及しましたが、だからと言ってそれを使用する必要があるわけではありません。
継続的なスクロールは、常にストリーミングされるコンテンツにとって有益であり、各コンテンツ ユニットが同じ階層レベルに属し、ユーザーの関心を引く可能性がほぼ同じである比較的フラットな構造を持っています。
今日の投稿では、JavaScript の無限スクロールについて学びます。
JavaScript での無限スクロール
GlobalEventHandlers mixin の onscroll プロパティは、scroll イベントを処理するイベント ハンドラーです。
Scroll イベントは、ドキュメント ビューまたは要素がユーザー、Web API、またはユーザー エージェントによってスクロールされたときに発生します。
構文：
target.onscroll = functionRef
functionRef は、関数名または関数式です。 この関数は、UIEvent オブジェクトを唯一の引数として取ります。
一度にオブジェクトに割り当てられる onscroll ハンドラーは 1つだけです。
複数のハンドラーが必要な場合は、代わりに EventTarget.addEventListener() メソッドを使用して、scroll イベントをリスナーに渡すことができます。 window.onscroll ここ に関する詳細情報を見つけることができます。
例を使って理解しましょう。
<body>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
</body>
var body = document.querySelector('body');
body.onscroll = function() {
if (window.scrollY > (document.body.offsetHeight - window.outerHeight)) {
console.log('It\'s working!');
body.style.height = document.body.offsetHeight + 100 + 'px';
}
}
上記の例では、HTML DOM の本文内に 10 段落のタグを定義しています。 body がレンダリングされ、ユーザーが下にスクロールするたびに、ドキュメントが現在垂直方向にスクロールされているピクセル数を確認します。
body と window の高さよりも大きい場合は、body の現在の高さに 100px を追加します。 JavaScript をサポートするブラウザーで上記のコード スニペットを実行します。 以下の結果がコンソールに出力されます。
出力：
"It's working!"
"It's working!"
"It's working!"
"It's working!"
"It's working!"
"It's working!"
....
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn