JavaScriptでスクロールが終わったらどうすればいいですか？
Webサイトで、スクロールに合わせてアニメーションを表示したり、特定の要素が画面内に表示されたタイミングでコンテンツを読み込んだりするなど、スクロールイベントはインタラクティブな表現を実現するために欠かせない要素です。
この記事では、JavaScriptを使ってスクロール終了時に処理を実行する方法を紹介します。具体的には、scrollイベントとsetTimeout()関数を組み合わせた方法を解説し、実用的なコード例も交えて分かりやすく説明します。
scrollイベントとsetTimeout()関数の組み合わせ
scrollイベントは、要素がスクロールされるたびに発生します。しかし、スクロール中はイベントが頻繁に発生するため、スクロール終了時に処理を実行したい場合は、そのままではうまくいきません。
そこで登場するのがsetTimeout()関数です。この関数は、指定した時間（ミリ秒）後に処理を実行します。scrollイベントが発生するたびにタイマーをリセットすることで、スクロールが停止したタイミングを検知することができます。
以下は、スクロールが終了したタイミングでコンソールにメッセージを出力するコード例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スクロール終了時の処理</title>
<style>
body {
height: 2000px; /* スクロールできるようにbodyの高さを設定 */
}
</style>
</head>
<body>
<script>
let timer = null;
window.addEventListener('scroll', () => {
clearTimeout(timer);
timer = setTimeout(() => {
console.log('スクロールが終了しました');
}, 200); // スクロール終了と判定するまでの時間
});
</script>
</body>
</html>
このコードでは、scrollイベントが発生するたびにsetTimeout()で設定したタイマーがクリアされ、新たにタイマーがセットされます。スクロールが停止すると、新たにタイマーがセットされることなく、200ミリ秒後にコンソールにメッセージが出力されます。
応用例
スクロール終了時の処理は、様々な場面で応用できます。以下は、代表的な例です。
| 用途 | 説明 |
|---|---|
| 無限スクロール | ページの下部までスクロールしたときに、自動的に次のページのコンテンツを読み込みます。 |
| 遅延読み込み | 画像や動画などの重いコンテンツを、画面内に表示される直前に読み込むことで、ページの表示速度を向上させます。 |
| アニメーションの実行 | 特定の要素が画面内に表示されたタイミングでアニメーションを開始します。 |
参考資料
* Window: scroll event - MDN Web Docs * setTimeout() - MDN Web Docsよくある質問
-
Q: スクロール終了と判定するまでの時間を変更するには？
A: 上記コード例では、
setTimeout()の第二引数に指定している200ミリ秒を変更することで、スクロール終了と判定するまでの時間を調整できます。 -
Q: 特定の要素がスクロールされた場合にのみ処理を実行するには？
A:
windowの代わりに、対象の要素に対してaddEventListener()でscrollイベントを設定します。 -
Q: スクロール位置を取得するには？
A:
window.scrollYで垂直方向のスクロール位置を、window.scrollXで水平方向のスクロール位置を取得できます。
その他の参考記事:jquery 動か ない