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制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

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

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

floatで失った要素の高さを取り戻す2つの方法

floatで失った要素の高さを取り戻す2つの方法

【WordPress】記事の公開日と最終更新日を表示

【WordPress】記事の公開日と最終更新日を表示

【Three.js】マウスにライトを追従させる方法

【Three.js】マウスにライトを追従させる方法

CSSだけでぷよぷよしたアニメーションの実装方法

CSSだけでぷよぷよしたアニメーションの実装方法

jQueryでURLやパラメータを取得する方法【location】

jQueryでURLやパラメータを取得する方法【location】