HTMLでのインフィニットスクロールの実装 – HTMLで始めるホームページ作成

インフィニットスクロールの基本原理

インフィニットスクロールは、JavaScriptでページを監視し、特定の条件に達したときに次のコンテンツを読み込むことで実現されます。インフィニットスクロールの例(外部リンク) を見てみましょう。

手順1: マークアップの準備

まず、HTMLマークアップを準備します。以下のコードは、基本的なページレイアウトの例です。

<div id="content">
    <div class="post">コンテンツ1</div>
    <div class="post">コンテンツ2</div>
    <div class="post">コンテンツ3</div>
</div>
<div id="loading">読み込み中...</div>

上記のように、<div id="content">の中に読み込まれるコンテンツを配置します。さらに、読み込み中の表示用に<div id="loading">を追加します。

手順2: JavaScriptでの監視

次に、JavaScriptを使ってスクロールを監視し、最後まで行ったら新しいコンテンツを読み込むようにします。

window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    loadMoreContent();
  }
});

function loadMoreContent() {
  const loading = document.getElementById('loading');
  loading.style.display = 'block';
  // Ajax呼び出しなどで新しいコンテンツを取得
  setTimeout(() => {
    loading.style.display = 'none';
    const newContent = document.createElement('div');
    newContent.className = 'post';
    newContent.innerText = '新しいコンテンツ';
    document.getElementById('content').appendChild(newContent);
  }, 2000);
}

上記のコードでは、スクロールイベントを監視し、ページの終わりに達したときにloadMoreContent()関数を呼び出します。この関数内で新しいコンテンツを取得し、<div id="content">に追加します。

まとめ

以上が基本的なインフィニットスクロールの実装方法です。さらに機能を追加することで、より洗練されたユーザーエクスペリエンスを提供できます。しかし、インフィニットスクロールはユーザーが膨大な情報に圧倒されるリスクも伴います。