はじめに
ReactやVueで無限スクロールを実現する時は既存のパッケージに頼ってた私ですが、VanJSではそのようなパッケージは無く、誰も作ってなかったので挑戦してみました。結論から言うと簡単にできました。
無限スクロールとは
ユーザーが画面下部までスクロールすると、クリックやタップなどのページ遷移操作をしなくても、自動的に新しいコンテンツを表示させることです。有名な例では、Googleの画像検索が無限スクロールを取り入れており、下までスクロールすると新たな画像が次々と表示されます。
デモ
リポジトリ
無限スクロールの作り方
無限スクロールを実現する重要な部分だけ説明します。
無限スクロールの大まかな処理の流れは以下の通りです。
ここで重要なのはローディングが画面内に表示されているかどうかですが、実はIntersection Observer APIを利用すれば簡単に実装できます。このAPIはターゲットの要素が画面に表示されているか監視するAPIであり、ブラウザの標準APIとして備わってます。
以下のコードではtarget要素がブラウザで表示する画面内に出入りする度にcallback関数が実行されます。その関数で
-
target要素が画面内に入ったらデータを取得して要素を追加する -
target要素が外面外であれば何もしない
ようにすれば無限スクロールが作れます。
const observer = new IntersectionObserver(callback, options)
observer.observe(target)
ただし１つ注意があり、target要素が画面内ずっとに表示されている場合はcallback関数は実行されません。無限スクロールを実現するためにはtarget要素が画面内ずっとに表示されていても次のデータを取得する必要があるため、リポジトリのコードでは一度target要素の監視を終了し、次もデータを取得する場合はtarget要素の監視を再開するようにしています。
まとめ
今回はVanJSで無限スクロールの作成に挑戦してみました。作る前は、どうやってローディングが画面内に表示されているか判断しようかと悩みましたが、まさかブラウザの標準APIに便利なものがあるとは思いませんでした。今までReactやVueでは既存のパッケージを使っていましたが、この程度のコード量で作れるのであれば自作しても良いかなと思いました。
最後に
GoQSystemでは一緒に働いてくれる仲間を募集中です！
ご興味がある方は以下リンクよりご確認ください。