ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryで上下のスクロール方向を検出するにはどうすればよいですか?

jQueryで上下のスクロール方向を検出するにはどうすればよいですか?

DDD
DDDオリジナル
2024-12-07 17:52:12705ブラウズ

How Can I Detect Up or Down Scroll Direction with jQuery?

jQuery スクロール イベントの方向の検出

jQuery でスクロール イベントを処理する場合、スクロールが上に移動しているか下に移動しているかを判断すると便利です。これにより、スクロール方向に基づいてさまざまな動作やコンテンツを表示できます。

これを実現するには、ウィンドウ オブジェクトのscrollTop プロパティを利用し、現在の値を以前の値と比較します。実装方法は次のとおりです。

var lastScrollTop = 0;
$(window).scroll(function(event) {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
        // Downscroll code
    } else {
        // Upscroll code
    }
    lastScrollTop = st;
});

このコードでは、lastScrollTop は前のscrollTop 値を保存します。スクロール イベントがトリガーされると、現在のscrollTop値が取得され、それがlastScrollTopと比較されます。現在の値が前の値より大きい場合、スクロールは下に移動しています (下にスクロールすると、scrollTop が増加するため)。それ以外の場合、スクロールは上に移動します。

以上がjQueryで上下のスクロール方向を検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。