無限スクロールとは何ですか？

オンライン ストアなど、ページを下にスクロールすると商品が連続して表示されるサイトをすでに見たことがあるかもしれません。もう 1 つの例は、endless.horse です。これは単純に見えるかもしれませんが、「無限スクロール」の機能を示す優れた例です。 Web サイトにアクセスすると馬が表示されますが、ページを下にスクロールすると、馬の足は無限に伸び続け、馬の足元に到達することはありません。

無限スクロールの実装

この機能は最新の開発で広く使用されています。 Twitter、Facebook、特に Instagram などの主要なソーシャル ネットワークで、ページを下にスクロールしてもコンテンツが終わらないように見える無限スクロールが見られます。

この記事では、この機能の基本的な実装を説明します。ただし、このアプローチでは、長いクエリの問題、キャッシュの実装、実稼働アプリケーションに必要なその他のソリューションなどの問題には対処できません。それでも、これはこの機能を実装する方法を理解するための出発点です。

ステップ 1: 無限スクロール機能を追加する場所を決定する

まず、無限スクロール機能を追加する場所を決めます。投稿のリストや画像になりますか?データの取得元を決定する必要もあります。この例では、基本 API である Random Fox API の画像を使用します。

ステップ 2: HTML ファイルを作成する

HTML ファイルを作成し、ランダムなキツネの画像のコンテナを含めます。

Fox Images

ステップ 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を取得します。 JavaScript ファイルと CSS ファイルを HTML にリンクすることを忘れないでください。

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 




  
  
  ステップ 5: スクロール イベントを追加する


無限スクロール機能を実装するには、次のイベント リスナーを追加します:


window.addEventListener('scroll', () => {
  if (window.scrollY   window.innerHeight >= document.documentElement.scrollHeight) {
    loadImages();
  }
});




scrollY と innerHeight の合計がscrollHeight 以上の場合、ドキュメントの最後に到達したため、さらに画像を読み込む必要があることを意味します。


  
  
  結論


これで、ページは無限スクロール技術で機能するようになります。ここにあなたへの課題があります。選択した別の API を使用してこのプロジェクトをやり直してください。また、アイテムを表示するためのより複雑なスタイルも実装してください。幸運を！