無限スクロール

無限スクロールパターンは、ユーザーのスクロールアクションでコンテンツを動的にロードする方法を提供します。

最後の行（またはコンテンツの最後の要素）に焦点を当てましょう

<tr hx-get="/contacts/?page=2"
    hx-trigger="revealed"
    hx-swap="afterend">
  <td>Agent Smith</td>
  <td>void29@null.org</td>
  <td>55F49448C0</td>
</tr>

この最後の要素にはリスナーが含まれています。そのリスナーは、ビューにスクロールするとリクエストをトリガーします。すると、その結果はその後に追加されます。結果の最後の要素には、次の 結果ページをロードするリスナー自体が含まれます。以下、同様のことが続けられます。

revealed - 要素がビューポートにスクロールされたときにトリガーされます（遅延読み込みにも役立ちます）。 overflow-y: scroll のように css で overflow を使用している場合は、 revealed の代わりに intersect once を使用する必要があります。

🔗デモ