ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用した無限スクロールの理解と実装
オンライン ストアなど、ページを下にスクロールすると商品が連続して表示されるサイトをすでに見たことがあるかもしれません。もう 1 つの例は、endless.horse です。これは単純に見えるかもしれませんが、「無限スクロール」の機能を示す優れた例です。ウェブサイトにアクセスすると馬が表示されますが、ページを下にスクロールすると、馬の足は無限に伸び続け、決して馬の足に到達しないことがわかります。
この機能は、最新の開発で広く使用されています。 Twitter、Facebook、特に Instagram などの主要なソーシャル ネットワークで、ページを下にスクロールしてもコンテンツが終わらないように見える無限スクロールが見られます。
この記事では、この機能の基本的な実装を説明します。ただし、このアプローチでは、長いクエリの問題、キャッシュの実装、運用アプリケーションに必要なその他のソリューションなどの問題には対処できません。それでも、これはこの機能を実装する方法を理解するための出発点です。
まず、無限スクロール機能を追加する場所を決定します。投稿のリストや画像になりますか?データの取得元を決定する必要もあります。この例では、基本 API、Random Fox API の画像を使用します。
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>
この例では、スタイルシートを非常に単純にしておきます。
.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; }
コンテナを選択し、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();
無限スクロール機能を実装するには、次のイベント リスナーを追加します。
window.addEventListener('scroll', () => { if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight) { loadImages(); } });
scrollY と innerHeight の合計がscrollHeight 以上の場合、ドキュメントの最後に到達したため、さらに画像をロードする必要があることを意味します。
これで、ページは無限スクロール技術で機能するはずです。ここにあなたへの課題があります。選択した別の API を使用してこのプロジェクトをやり直し、アイテムを表示するためのより複雑なスタイルも実装してください。頑張ってください!
以上がJavaScript を使用した無限スクロールの理解と実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。