• JavaScript

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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