Home
JavaScript
jQueryでスクロール中か否かを判定する方法

jQueryでスクロール中か否かを判定する方法

公開日
2022.03.12
更新日
2022.04.02
jQueryでスクロール中か否かを判定する方法

どうも!かけちまるです!

ユーザーがサイトを操作(スクロール)していない時に処理を実行したいことがある場合に使えるJavaScriptをご紹介したいと思います。

例えば、ユーザーがスクロールしていない時に広告バナーを表示させたい時などに使えそうですね。

この記事では、

  • ・スクロール中か判定する実装方法

がわかります。

スクロール中か判定する実装方法

今回はjQueryの

  • ・scrollイベント
  • setTimeout()
  • clearTimeout()

を使って実装します。

スクロール中は「スクロール中」、スクロールしていない時は「スクロールしていない」と表示されるように実装していきます。
該当ソースは次の通りです。

HTML
コピー
<div class="scroll">スクロールしていない</div>
JavaScript
コピー
let timeOut; $(window).on('scroll', function(){ let scrolling = 'スクロール中'; $('.scroll').text(scrolling); clearTimeout(timeOut); timeOut = setTimeout(function(){ scrolling = 'スクロールしていない'; $('.scroll').text(scrolling); }, 500); });

実装サンプル

スクロールしていない

まとめ

setTimeout()clearTimeout()を理解していないと難しく感じるかも知れません。
ですが、setTimeout()clearTimeout()は使う機会が多いと思うのでこの機会にマスターしておきましょう!

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

画像の読み込み進度を%表示するオープニングアニメーション

画像の読み込み進度を%表示するオープニングアニメーション

【WordPress】PHPテンプレートでショートコードを使う方法

【WordPress】PHPテンプレートでショートコードを使う方法

mix-blend-modeが効かない時はスタックコンテキストを考えよう

mix-blend-modeが効かない時はスタックコンテキストを考えよう

セクションごとにスクロールできるjQueryプラグインのScrollify.jsを解説

セクションごとにスクロールできるjQueryプラグインのScrollify.jsを解説

【簡単】WebサイトにGoogleマップを埋め込む一番簡単な方法

【簡単】WebサイトにGoogleマップを埋め込む一番簡単な方法

【CSS】mix-blend-modeで乗算などを表現する方法

【CSS】mix-blend-modeで乗算などを表現する方法