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

今回は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()は使う機会が多いと思うのでこの機会にマスターしておきましょう！