ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用した無限スクロールの理解と実装
JavaScript を使用した無限スクロールの理解と実装
- 王林オリジナル
- 2024-07-23 12:35:31717ブラウズ
無限スクロールとは何ですか?
オンライン ストアなど、ページを下にスクロールすると商品が連続して表示されるサイトをすでに見たことがあるかもしれません。もう 1 つの例は、endless.horse です。これは単純に見えるかもしれませんが、「無限スクロール」の機能を示す優れた例です。ウェブサイトにアクセスすると馬が表示されますが、ページを下にスクロールすると、馬の足は無限に伸び続け、決して馬の足に到達しないことがわかります。
無限スクロールの実装
この機能は、最新の開発で広く使用されています。 Twitter、Facebook、特に Instagram などの主要なソーシャル ネットワークで、ページを下にスクロールしてもコンテンツが終わらないように見える無限スクロールが見られます。
この記事では、この機能の基本的な実装を説明します。ただし、このアプローチでは、長いクエリの問題、キャッシュの実装、運用アプリケーションに必要なその他のソリューションなどの問題には対処できません。それでも、これはこの機能を実装する方法を理解するための出発点です。
ステップ 1: 無限スクロール機能を追加する場所を決定する
まず、無限スクロール機能を追加する場所を決定します。投稿のリストや画像になりますか?データの取得元を決定する必要もあります。この例では、基本 API、Random Fox API の画像を使用します。
ステップ 2: HTML ファイルを作成する
HTML ファイルを作成し、ランダムなキツネ画像のコンテナを含めます。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fox Images</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 class="header">Fox Images</h1> <div class="container"></div> <script src="script.js"></script> </body> </html>
ステップ 3: CSS ファイルを作成する
この例では、スタイルシートを非常に単純にしておきます。
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.header {
font-size: 32px;
color: black;
text-align: center;
font-family: Verdana, sans-serif;
}
img {
width: 400px;
height: 400px;
margin: 4px;
object-fit: cover;
}
ステップ 4: JavaScript ファイルを作成する
コンテナを選択し、Random Fox API URL を取得します。 HTML 内で JavaScript ファイルと CSS ファイルをリンクすることを忘れないでください。
const container = document.querySelector('.container');
const URL = "https://randomfox.ca/images/";
function getRandomNumber() {
return Math.floor(Math.random() * 100);
}
function loadImages(numImages = 6) {
let i = 0;
while (i < numImages) {
const img = document.createElement('img');
img.src = `${URL}${getRandomNumber()}.jpg`;
container.appendChild(img);
i++;
}
}
loadImages();
ステップ 5: スクロール イベントを追加する
無限スクロール機能を実装するには、次のイベント リスナーを追加します。
window.addEventListener('scroll', () => {
if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight) {
loadImages();
}
});
scrollY と innerHeight の合計がscrollHeight 以上の場合、ドキュメントの最後に到達したため、さらに画像をロードする必要があることを意味します。
結論
これで、ページは無限スクロール技術で機能するはずです。ここにあなたへの課題があります。選択した別の API を使用してこのプロジェクトをやり直し、アイテムを表示するためのより複雑なスタイルも実装してください。頑張ってください!
以上がJavaScript を使用した無限スクロールの理解と実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。