無限スクロールローダー
このコンポーネントは、リストの末尾までスクロールすると自動で次のアイテムを読み込む無限スクロールです。中心となるのは IntersectionObserver で、リスト下部のローダー要素が表示領域に入ったことを検知して次の6件を追加します。
解説
このコンポーネントは、リストの末尾までスクロールすると自動で次のアイテムを読み込む無限スクロールです。中心となるのは IntersectionObserver で、リスト下部のローダー要素が表示領域に入ったことを検知して次の6件を追加します。読み込みは setTimeout で擬似的な遅延を入れており、実装では実際の API 取得に置き換えます。追加されたカードには animation でフェードインが付き、滑らかに現れます。
使う場面
- 記事一覧や商品一覧など、件数が多くページ送りを避けたい画面
- SNS のタイムラインのように、続きを次々読ませたいフィード
- 検索結果を区切らず連続して見せたいとき
1回あたりの読み込み件数は i<6 の数値で、全体件数は total で調整します。全件読み終えるとローダーに is-hidden が付いて停止します。注意点として、無限スクロールはフッターに到達しづらくなるため、利用規約やお問い合わせへの導線が埋もれないよう配慮します。読み込み中であることをローダーの3点アニメーションで明示しており、アクセシビリティのため aria-label も付けています。本番では取得失敗時の再試行処理も用意すると安心です。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
1回に読み込む件数を変えられますか
JavaScript 内のループ条件にある 6 という数値を変えれば、1回あたりの追加件数を調整できます。全体の上限は total 変数で決まり、page かける件数が total に達するとローダーが隠れて読み込みが止まります。
スクロール監視を自前で書く必要はありますか
ありません。本コードは IntersectionObserver を使い、ローダーが表示領域に入った瞬間だけ処理を呼びます。scroll イベントで座標を毎回計算する古い方法より負荷が軽く、対応ブラウザも広いのが利点です。