スクロールアップイベントリスナーの実装方法


  1. addEventListenerを使用する方法:

    window.addEventListener('scroll', function(event) {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
    // ここにスクロールアップ時の処理を書く
    }
    });

    上記のコードでは、scrollイベントをwindowオブジェクトに対してリスンし、スクロールが発生した際に指定したコールバック関数が実行されます。window.innerHeightはウィンドウの可視領域の高さを表し、window.pageYOffsetはスクロール量を表します。document.body.offsetHeightはドキュメント全体の高さを表します。条件式(window.innerHeight + window.pageYOffset) >= document.body.offsetHeightは、ページの一番下までスクロールした時に真となります。

  2. onscrollプロパティを使用する方法:

    window.onscroll = function() {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
    // ここにスクロールアップ時の処理を書く
    }
    };

    上記のコードでは、onscrollプロパティをwindowオブジェクトに割り当て、スクロールイベントが発生した際に指定した関数が実行されるようにします。それ以外の部分は先ほどのaddEventListenerの方法と同様です。

これらの方法を利用することで、スクロールアップイベントを検知して処理を実行することができます。必要に応じて、上記のコードをカスタマイズして使用してください。