無限スクロールを実装する方法2020/2/192019/7/8Akira福岡在住ウェブデザイナー。サイト制作に役立つ情報を紹介しています。記事の更新をお知らせしています。アップデートがありました。動的に表示するリストの無限スクロールが可能になりました。実装する方法をご紹介します。無限スクロールの動作をご覧ください。件ずつデータを追加しています。つのタイプがあり、ボタンをクリックせずに自動的にデータを追加するタイプもあります。無限スクロールは、以下の特徴があります。現在のページに「データ」を追加する「異なるページ」を追加するわけではないため、ページアドレスは変わらないデータ追加後の状態は、ブラウザの履歴に残らないこの特徴は、異なるページを追加する一般的な無限スクロールとは違います。一般的な無限スクロールは、このような動作をするのが基本です。現在のページに「異なるページ」を追加する「異なるページ」を追加後、ページアドレスが変わる追加したページのアドレスが、ブラウザの履歴に残る一般的な無限スクロールはブラウザの履歴に残るため、ブラウザの「戻る」が使えます。無限スクロールは、ブラウザの「戻る」が使えません(「戻る」でデータ追加前の状態に戻らない)。無限スクロールの特徴を考慮すると、このようなリストに適しています。併用で実装可能)一方、不適切だと思うのは、ページネーションのある複数のページに分割した記事一覧リスト(記事一覧ページ)。悪影響が出る恐れがあります。執筆時点では試験運用版のため、まだ本番環境で実装できません。ステップで終わります。今回は、投稿ページに「新着記事」を表示する例として説明します。件を表示し、無限スクロールで「現在の投稿ページ」を除く全件を作成日順(新しい記事から表示する降順)で表示するものです。独自エンドポイントの作成です。動的にデータを取得します。内に含まれていません。追加し独自のエンドポイントを作成します。);}投稿ページに「アイキャッチ画像がない」「カテゴリーがない」時などの処理はしていません。