-
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
は、ページの一番下までスクロールした時に真となります。 -
onscrollプロパティを使用する方法:
window.onscroll = function() { if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) { // ここにスクロールアップ時の処理を書く } };
上記のコードでは、
onscroll
プロパティをwindow
オブジェクトに割り当て、スクロールイベントが発生した際に指定した関数が実行されるようにします。それ以外の部分は先ほどのaddEventListener
の方法と同様です。
これらの方法を利用することで、スクロールアップイベントを検知して処理を実行することができます。必要に応じて、上記のコードをカスタマイズして使用してください。