はじめに
みなさんは、JavaScriptでスクロールが終わった時に何か処理を行いたいと思ったことはありますか？
「スクロールが終わった時にアニメーションしたい」や「スクロールが終わった時に動画や音楽を再生させたい」など、
そんな頻繁に思いはしないと思いますが、たまにはあると思います。
この記事では、そんな時に使えるスイベントscrollendを紹介します。
スクロールが終わった時に発生する Scrollend
Scrollendは、実験的な機能です。
Chrome Canary, chrome 112以降, Firefox 109以降のブラウザで対応しています。
※投稿日2023/2/10時点
今までのやり方
今までは、確実にスクロールが終わったことを検知する方法はありませんでした。
そのため、以下のハックのようなやり方でスクロールが終わったことを検知していました。
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
このsetTimeoutを使う方法は、 スクロールが100ms間停止しているか検知しているため、
スクロールが終わった時というより、一時停止した時に発生するイベントになります。
この方法では、イベントが発生するのが遅れたり、ユーザーの指が画面上にあるのにイベントが発生したりすることがありました。
そのため、心地よいユーザー体験にならず、バグが発生しやすくありました。
これからのやり方
Chrome Canaryバージョン, chrome 112以降, Firefox 109以降のブラウザでは、以下のようにscrollendイベントでスクロール終了時にイベントを発生させることができるようになりました。
// onscrollendを使う方法
document.onscrollend = event => { ... }
// addEventListenerを使う方法
addEventListener("scrollend", (event) => { ... });
この方法は以下のようなタイミングで発火します。
- ブラウザでスクロールのアニメーションやトランディションが終わった時
- ユーザーの指が離れた時
- ポインターがスクロールバーを離した時
- キー入力を終わった時
- ページ内スクロールが終わった時
- スクロールスナップが終わった時
-
scrollTo()が終わった時 - visual viewportのスクロールした時
ただ、以下の条件では発火しないので注意が必要です。
- ユーザーのジェスチャーによって、スクロールの位置が変化しない時
-
scrollTo()でトランディションがなかった時
サンプル
Scrollendは、実験的な機能です。
Chrome Canary, chrome 112以降, Firefox 109以降のブラウザで対応しています。
※投稿日2023/2/10時点
See the Pen Scrollend by でぐぅー | Qiita (@sp_degu) on CodePen.
まとめ
この記事では、、JavaScriptでスクロールが終わった時に発生するScrollendイベントについて書いせるしました。
今までの setTimeoutを使った方法は、 スクロールが100ms間停止しているか検知しているため、
スクロールが終わった時というより、一時停止した時に発生するイベントのため、正確にスクロールが終わった時に発火させることができませんでした。
これからは、Scrollendイベントを使って、JavaScriptでスクロールが終わった時にイベントを発火させましょう。
Scrollendイベントは、2023/2/10時点では、Chrome Canary, chrome 112以降, Firefox 109以降のブラウザーでしか使えないので、使えるようになるのを気長に待ちましょう。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。