JavaScriptでスクロールを判定する

サンプルコード

サイトを100px以上スクロールした時に背景を黒にする。

<script>
    window.addEventListener("scroll", function(){
    const scrollPos = document.querySelector('html')
    const rectTop = scrollPos.getBoundingClientRect().top
    const  scrollHeight = rectTop * '-1';
        if (scrollHeight> 100) {
            scrollPos.style.backgroundColor="#000000";
        } else {
            scrollPos.style.backgroundColor="#ffffff";
        }
    })
</script>

解説というか考え方

スクロールで処理スタート

    window.addEventListener("scroll", function(){})

必要要素を諸々定義づける

    const scrollPos = document.querySelector('html')

スクロール対象、つまり今回はサイト全体を対象にしたいので、全体であるHTMLを定義する。

    const rectTop = scrollPos.getBoundingClientRect().top

getBoundingClientRect()は要素の寸法と、そのビューポートに対する位置を返すメソッド。
つまり今回はHTMLの.top位置を返すようになる。
対象がHTMLなので最初に返すのは０。
その後スクロールされるたびに「‐１、‐２、‐３......」と位置を返してくる。

    const  scrollHeight = rectTop * '-1';

なんとなく不等号の計算がわかりにくくなるので、正数にする。

返り値によって処理をする。

        if (scrollHeight> 100) {
            scrollPos.style.backgroundColor="#000000";
        } else {
            scrollPos.style.backgroundColor="#ffffff";
        }

先ほどの正数にする処理を省く場合は、if (scrollHeight < -100) {にすれば問題ない。