ホームページ >ウェブフロントエンド >jsチュートリアル >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 サイトの他の関連記事を参照してください。