無限スクロールローダー

解説

一番下までスクロールすると次の項目を自動で読み込む無限スクロールローダーです。要となるのは IntersectionObserver で、リスト末尾のローダー要素が画面に入ったことを検知して読み込み関数を呼びます。スクロール量を常時計算する従来手法より軽く、無駄な処理を抑えられるのが利点です。新しい項目はフェードインのアニメーションで現れ、回転するスピナーが読み込み中であることを示します。一定ページに達するとローダーを隠して終了します。

向いている用途

• 記事一覧やブログのカード送り
• 商品リストやギャラリーの段階的表示
• 検索結果やタイムラインの追加読み込み

このサンプルは setTimeout で擬似的に遅延を作っていますが、実際は fetch で API からデータを取得する形に差し替えます。一度に読む件数や終了ページ数は数値を変えるだけで調整できます。注意点として、無限に伸びる作りはページ末尾のフッターへ到達しにくくなります。フッターが重要なサイトでは「もっと見る」ボタン併用も検討してください。

使用例・適したシーン

• LP の演出強化
• 記事の読了率向上
• ストーリーテリング表現