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

jQueryでスクロールの終了を検出するにはどうすればよいですか?

DDD
DDDオリジナル
2024-12-13 02:22:13527ブラウズ

How Can I Detect the End of Scrolling in jQuery?

jQuery: スクロールの終了の検出

はじめに:
Web 開発では、ユーザー エクスペリエンスを向上させるためにユーザー スクロールの処理が重要になることがあります。 。 jQuery のscroll() 関数は、スクロール イベントを検出する便利な方法を提供します。ただし、特定のシナリオでは、ユーザーがいつスクロールを停止したかを理解することも重要です。

問題の理解:
提供されたコードは、スクロール時にクラスを削除する方法を示しています。ただし、OP はスクロールが停止したときにクラスを追加し直すことを目的としています。これは、削除されたクラスがスクロール中に必要な透明効果と競合するためです。

スクロールの終了の検出:
これを実現するには、スクロールがいつ停止したかを検出する必要があります。これは、タイムアウトを指定したscroll()関数を使用した解決策です:

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        console.log("Haven't scrolled in 250ms!");
    }, 250));
});

このコードは、250ミリ秒のタイムアウトを設定します。ユーザーがスクロールすると、タイムアウトがリセットされます。ユーザーが 250 ミリ秒間スクロールを停止すると、タイムアウト関数が起動し、スクロールの終了を示します。

高度な解決策:
正確なタイミングが重要な状況では、jQuery の使用を検討してください。平穏な.js。この拡張機能は jQuery のイベント処理を強化し、特定の遅延の後にのみイベント ハンドラーを起動できるようにします。

$(window).on('scroll', function(e) {
    console.log(e.type + '-event was 250ms not triggered');
}, 250);

この拡張機能を使用すると、250 ミリ秒の遅延を指定して、スクロール イベントが終了した後にのみコールバックをトリガーできます。その期間は停止しました。

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

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