こんにちは。エキサイトでデザイナーをしている齋藤です。
今回は、htmxで要素がビューポートにスクロールされた場合にAJAXリクエストを発行する方法をご紹介します。
実現したいこと
冒頭、実現したいことを整理します。
htmxではHTMLタグに専用の属性を記述することで、AJAXリクエストを発行できます。
<!-- クリックするとPOSTリクエストが発行される --> <button hx-post="/path/to/dir" hx-trigger="click">...</button>
お示しの例では、hx-trigger="click"により、要素のクリックイベントをトリガーとしてリクエストが発行されます。
一方で今回実現したいのは、要素がビューポートにスクロールされた（表示領域に要素が到達した）ことをトリガーにリクエストを発行することです。
hx-targetの設定で実現可能
結論から申し上げると、AJAXリクエストのトリガーを指定する hx-trigger属性に revealed を設定することで実現可能です。
<!-- 要素がビューポートにスクロールされるとPOSTリクエストが発行される --> <div hx-post="/path/to/dir" hx-trigger="revealed">...</div>
検証してみる
以下のサンプルで検証してみます。
<div hx-post="/path/to/dir" hx-trigger="revealed" hx-confirm="POSTしますか？">...</div>
hx-postでPOSTリクエストを指定hx-trigger="revealed"で要素がビューポートにスクロールされたことをトリガーに指定- 実行確認のために
hx-confirmでwindow.confirmを実行
overflowプロパティが適用された要素内で使用する場合は注意
要素内スクロールなど、CSSのoverflowプロパティが適用された要素の中では hx-trigger="revealed"が期待通りに動作しません。
見かけ上は表示されていなくても、ビューポート内と判定されてしまいページ読み込み直後にリクエストが発行されてしまいます。
その場合は、revealedの代わりに intersect onceと設定する必要があります。
まとめ
今回は、htmxで要素がビューポートにスクロールされた場合にAJAXリクエストを発行する方法をご紹介しました。
hx-trigger="revealed"により、無限スクロールなどのユーザー体験を簡単かつシンプルに実装することが可能です。ぜひお試しください。
htmxを使用される方の一助となれば幸いです。ご精読ありがとうございました。
