無限スクロールは、ページ下部に近づいたタイミングで次のコンテンツを自動的に読み込み、ユーザーがページ遷移なしで閲覧を続けられるUIパターンです。SNSのタイムライン、画像一覧、ニュースフィード、商品一覧などでよく使われます。
今回のデモは、SNS風のフィードを題材にしています。投稿カード、アバター、本文、画像枠、返信・リポスト・いいね・閲覧数のアクションを並べ、画面下のローダーが見えたら次の投稿を追加する構成です。小さなHTMLファイルですが、無限スクロールに必要な考え方がひと通り入っています。
このデモで実現していること
デモの中心は、次の3つです。
- 投稿カードをJavaScriptで動的に作る
- `IntersectionObserver` で下部のローダーを監視する
- ローダーが画面に近づいたら `loadMore()` で投稿を追加する
HTML側はとてもシンプルです。
<main id="feed"></main>
<div class="loader" id="loader">
<div class="spinner"></div>
<span>読み込み中…</span>
</div>
`#feed` は投稿が追加される場所、`#loader` は「ここまで来たら次を読み込む」という目印です。無限スクロールでは、この目印のことをセンチネルと呼ぶことがあります。
無限スクロールが得意な場面
無限スクロールが向いているのは、ユーザーが明確な終点を意識せず、流し見しながら興味のあるものを探す画面です。たとえば、SNSの投稿、写真ギャラリー、短いニュース、レコメンド一覧などです。
このような画面では、ページネーションの「次へ」を押す手間が小さな離脱要因になります。下へスクロールするだけで次が出てくるため、閲覧の流れが途切れにくくなります。
今回のデモも、まさに流し見に向いたSNS風の設計です。投稿1つあたりの情報量が軽く、画面をスクロールしながら次々に読む体験に合っています。
無限スクロールが苦手な場面
一方で、無限スクロールは万能ではありません。検索結果、管理画面、資料一覧、ECの商品比較のように「何ページ目に戻りたい」「特定の位置を共有したい」「全体件数を把握したい」という画面では、ページネーションのほうが親切なことがあります。
特に注意したいのは、フッターに到達しづらくなる問題です。下へ進むたびに新しい要素が追加されるため、会社情報、問い合わせ、利用規約などの重要リンクをフッターだけに置くと、ユーザーがたどり着けない場合があります。
解決策としては、固定ナビゲーション、別ページへのリンク、一定数読み込んだ後の「さらに読み込む」ボタン、フッター手前で自動読み込みを止める設計などがあります。
ページネーションとの違い
ページネーションは「1ページ目、2ページ目、3ページ目」のようにコンテンツを明確に分割します。URLや検索エンジンとの相性がよく、戻る操作や共有もしやすいです。
無限スクロールは、ページという区切りを表に出さず、連続した体験を優先します。その代わり、現在位置の保存、履歴管理、SEO、アクセシビリティには追加の配慮が必要になります。
つまり、無限スクロールは「ページネーションの上位互換」ではありません。目的が違うUIです。閲覧体験を滑らかにしたいなら無限スクロール、探しやすさや再訪性を重視するならページネーション、という判断軸を持つと選びやすくなります。
デモの全体構成
今回のHTMLは、大きく分けると4つの層でできています。
- HTML: 投稿一覧とローダーの置き場所
- CSS: SNS風フィードの見た目、ローディング、ホバー演出
- Data: 名前、ハンドル、本文、色、グラデーションの配列
- JS: 投稿生成、クリック操作、追加読み込み、監視処理
ファイルが1つにまとまっているので学習用として見通しがよく、必要になればCSSやJavaScriptを別ファイルへ分けて本番サイトへ移植できます。
実装で一番大事な考え方
無限スクロールの実装で大切なのは、「スクロール量を毎回計算する」のではなく、「読み込みの目印が見えたかどうか」を監視することです。
昔は `scroll` イベントで現在位置を調べ、下端まで何pxかを計算する実装がよく使われました。しかし `scroll` イベントは頻繁に発火するため、処理が重くなりやすく、調整も複雑になりがちです。
今回のデモでは `IntersectionObserver` を使っています。
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) loadMore();
}, { rootMargin: "300px" });
observer.observe(loader);
これにより、ローダーが画面に入った、または画面の近くまで来たタイミングで次の投稿を読み込めます。ブラウザに監視を任せられるため、実装も軽く、パフォーマンス面でも扱いやすい方法です。
まとめ
無限スクロールは、コンテンツを途切れなく見せたいときに強力なUIです。今回のSNS風フィードのように、軽い投稿が次々に並ぶ画面では特に効果を発揮します。
ただし、一覧性、検索性、履歴、SEO、アクセシビリティまで考えると、実運用では設計の工夫が必要です。次の記事では、まず見た目の土台となるHTMLとCSSを詳しく見ていきます。