Written by Kasumi

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

目次

関連記事

JavaScript

【JavaScript】スプレット構文(…)を使い、配列・オブジェクトを追加・連結(マージ)する方法

2022.12.04
735
JavaScript

JavaScriptで郵便番号から住所を自動入力する方法【zipcloud APIを使おう】

2023.01.03
7119
JavaScript

disabledを使って任意のinput要素を入力無効にする方法【条件判定で解除する】

更新日:2022.09.09
7028
JavaScript

JavaScriptで文字列の指定位置にHTMLタグを入れる方法

2022.12.15
1674