スクロールイベントの基本

スクロールイベントとは、ユーザーがページをスクロールした際に発生するイベントのことです。主に以下の用途で使用されます：

• スクロール位置の取得
• スクロール方向の判定
• 特定のスクロール量に達した際の処理
• 遅延読み込み（Lazy Loading）
• 無限スクロールの実装

scrollイベントリスナーの使い方

JavaScriptでスクロールイベントを検知するには、window オブジェクトに scroll イベントリスナーを設定します。

window.addEventListener("scroll", function() {
    console.log("スクロールされました！");
});
        

このコードを実行すると、ページをスクロールするたびにコンソールに「スクロールされました！」と表示されます。

スクロールの方向を検知する

スクロールの方向（上方向か下方向か）を判定するには、スクロール前後の位置を比較します。

let lastScrollY = window.scrollY;

window.addEventListener("scroll", function() {
    let currentScrollY = window.scrollY;
    if (currentScrollY > lastScrollY) {
        console.log("下にスクロール");
    } else {
        console.log("上にスクロール");
    }
    lastScrollY = currentScrollY;
});
        

このコードでは、前回のスクロール位置（lastScrollY）と現在のスクロール位置（currentScrollY）を比較し、スクロールの方向を判定します。

スクロール位置の取得

ページのスクロール位置を取得するには、window.scrollY を使用します。

window.addEventListener("scroll", function() {
    console.log("現在のスクロール位置: " + window.scrollY);
});
        

また、横方向のスクロール位置は window.scrollX で取得できます。

スクロールの進行度を取得

ページのスクロールの進行度を取得するには、document.documentElement.scrollHeight と window.innerHeight を活用します。

window.addEventListener("scroll", function() {
    let scrollTop = window.scrollY;
    let scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
    let scrollPercent = (scrollTop / scrollHeight) * 100;
    console.log("スクロール進行度: " + scrollPercent + "%");
});
        

無限スクロールの実装

無限スクロールを実装するには、スクロール位置がページの最下部に到達したかを判定します。

window.addEventListener("scroll", function() {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        console.log("最下部に到達！");
        // 新しいコンテンツを読み込む処理を追加
    }
});
        

遅延読み込み（Lazy Loading）の実装

画像やコンテンツを遅延読み込みするには、IntersectionObserver を使用する方法があります。

document.addEventListener("DOMContentLoaded", function() {
    let images = document.querySelectorAll("img.lazy");
    
    let observer = new IntersectionObserver(function(entries, observer) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                let img = entry.target;
                img.src = img.dataset.src;
                img.classList.remove("lazy");
                observer.unobserve(img);
            }
        });
    });

    images.forEach(img => observer.observe(img));
});
        

このコードでは、クラス名 lazy が付いた画像がスクロールによって表示領域に入ったときに、data-src の値を src にセットして画像を読み込みます。