Written by Kasumi

【JavaScript】スクロールを終えた後に任意の処理を実行する方法

JavaScriptでスクロールを終えた後に任意の処理を実行したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

スクロールが終えた後に任意の処理を実行する

window.addEventListener("scroll", function() {
  // スクロールを停止してから100ミリ秒後に任意の処理を実行
  clearTimeout(timeoutId);
  timeoutId = setTimeout(function() {
    // 任意の処理内容
  }, 100);
});

スクロールが終えた後に任意の処理を実行するコード例です。

まず最初にaddEventListenerを使ってスクロールイベントを定義します。

上記イベント内でsetTimeout関数を定義。

スクロールを停止してから、上記関数の第二引数に指定したミリ秒後に任意の処理を実行します。

以上でスクロールが終えた後に任意の処理を実行できます。

まとめ

JavaScriptでスクロールを終えた後に任意の処理を実行する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

JavaScriptで配列を結合する二つの方法【簡単】

2023.01.07
408
JavaScript

IEブラウザか、その他以外のブラウザかを判定し、条件分岐・判別する方法【Javascript】

更新日:2022.09.09
574
JavaScript

JavaScriptでHTML要素(DOM)を動的に移動する方法

2022.10.13
1585
JavaScript

【簡単】JavaScriptを使って任意の文字列が配列内にあるか検索する方法【indexOfメソッド】

更新日:2022.09.09
185