【JavaScript】スクロールを検知して処理を実行する方法！

あきぞらです。

JavaScriptで開発をしていて、

「スクロールをしたときに何か処理を実行させたい」という要件がありました。

今回は、その方法を紹介したいと思います。

scrollイベントを使ってスクロールを検知する

scrollイベントを使うことで、scrollしたときに処理を実行させることができます。

document.addEventListener('scroll', function(e) {
    // 何かしらの処理
    console.log('処理')
});

スクロールを止めて数秒後に何らかの処理を入れてみる

画面が重くなってしまう可能性がありますが、

スクロールを止めて数秒後に何らかの処理を入れてみます。

let isScroll = 0;
let count = 0;
function scrollCheck(){
    document.addEventListener('scroll', function(e) {
        isScroll = 1;
    });
    setTimeout(function(){
        isScroll = 0;
    })
    // 10秒後に何らかの処理を行う
    if(count == 10){
      // 処理
    }
    // 繰り返し
    setTimeout(scrollCheck, 1000);
}
scrollCheck();

上の例では、1秒ごとにcountをカウントアップし、10になったら何らかの処理を実行するサンプルです。

setTimeout()と組み合わせて書いています。

こんな感じで、画面の動きによって処理を付け加えることができます！