【JavaScript】画面のスクロールを止めたら画面の下の方にメニューを表示する

スクロールが停止した時にボタンを表示します。スクロールが停止した時にボタンを表示するだけの簡単なスクリプトを考えます。この場合、スクロールイベントが発生した後に一定時間（例：1000ミリ秒）スクロールが続かなければ、ボタンを表示するようにします。

HTML・CSS例

        .hidden {
            display: none;
        }
        #footerButton {
            position: fixed;
            bottom: 10px;
            right: 10px;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

<button id="footerButton" class="hidden">Scroll Button</button>

HTML構造:

• 固定位置に配置されたボタン（footerButton）があります。このボタンは初期状態で隠されています（class="hidden"）。

スタイル定義:

• .hiddenクラスはボタンを隠します（display: none）。

• #footerButtonは固定位置に配置され、スタイルが適用されています。

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    var footerButton = document.getElementById('footerButton');
    var scrollTimeout;

    window.addEventListener('scroll', function() {
        // 一旦ボタンを隠す
        footerButton.classList.add('hidden');

        // 前回のタイマーをクリア
        clearTimeout(scrollTimeout);

        // スクロールが止まった時にボタンを表示
        scrollTimeout = setTimeout(function() {
            footerButton.classList.remove('hidden');
            console.log('スクロール停止'); // デバッグ用
        }, 1000); // 1000ミリ秒後に表示
    }, false);
});

• DOMContentLoadedイベントでスクリプトがDOM読み込み後に実行されるようにしています。

• footerButton変数でボタン要素を取得し、scrollTimeout変数でタイマーIDを保存します。

• scrollイベントリスナー内で、ボタンを一旦隠し（footerButton.classList.add(‘hidden’)）、前回のタイマーをクリアします（clearTimeout(scrollTimeout)）。

• 1000ミリ秒後にボタンを表示するタイマーを設定します（scrollTimeout = setTimeout(function() { … }, 1000)）。

addEventListener

addEventListenerメソッドは、指定したイベントがターゲット（例：DOM要素、ドキュメント、ウィンドウ）で発生したときに、指定した関数を呼び出します。ここでは、windowオブジェクトに対してscrollイベントリスナーを追加しています。

window.addEventListener('scroll', function() {
    // イベントが発生した時に実行されるコード
}, false);

• scroll：イベントの種類です。ここではスクロールイベントを指定しています。

• function()：イベントが発生した時に実行されるコールバック関数です。

• false：イベントのバブリングまたはキャプチャリングフェーズを指定します。通常はfalseでバブリングフェーズ（イベントがターゲットから親要素に伝播する）を指定します。

setTimeout

setTimeout関数は、指定した時間（ミリ秒）後に指定した関数を実行します。ここでは、スクロールが停止してから1000ミリ秒後にボタンを表示するために使用しています。

構文:

scrollTimeout = setTimeout(function() {
    footerButton.classList.remove('hidden');
    console.log('スクロール停止'); // デバッグ用
}, 200);

scrollTimeout：setTimeoutの返り値はタイマーIDであり、これをscrollTimeout変数に保存します。後でこのタイマーをクリアするために使用します。

• function() { … }：指定した時間が経過した後に実行される関数です。この関数内でボタンを表示しています。

• 1000：遅延時間をミリ秒単位で指定します。ここでは1000ミリ秒後に関数を実行します。

clearTimeout(scrollTimeout)

clearTimeout関数は、指定されたタイマーIDのタイマーをクリアします。これにより、setTimeoutで設定された関数の実行をキャンセルできます。ここでは、新たにスクロールイベントが発生した時に前回のタイマーをクリアするために使用しています。

clearTimeout(scrollTimeout);

scrollTimeout：クリアしたいタイマーのIDです。setTimeoutの返り値であるタイマーIDを指定します。

scrollTimeout

scrollTimeoutは変数名で、setTimeoutによって返されるタイマーIDを格納するために使用されます。このIDを使って、clearTimeoutでタイマーをキャンセルしたり、他の処理を行います。

変数の使い方

var scrollTimeout;

// スクロールイベントリスナー内
scrollTimeout = setTimeout(function() {
    footerButton.classList.remove('hidden');
}, 200);

// 別の場所でタイマーをクリア
clearTimeout(scrollTimeout);

このように、scrollTimeout変数にタイマーIDを保存しておくことで、後でそのタイマーをクリアできるようにしています。

【JavaScript】画面のスクロールを止めたら画面の下の方にメニューを表示する | eguweb(エグウェブ)