jqueryでマウスホイールのスクロール距離を取得する方法

Web 開発では、マウス ホイール イベントは非常に一般的で重要な機能です。しかし、jQueryで開発していると、マウスホイールのスクロール距離を取得する必要がある場面に遭遇することがあります。この記事では、jQuery を使用してマウス ホイールのスクロール距離を取得する方法を説明します。

始める前に、1 つ明確にする必要があります。マウス ホイール イベントは、異なるブラウザーやオペレーティング システムではまったく同じ動作をしないということです。したがって、コードを記述するときは互換性の問題を考慮する必要があります。

まず、マウス ホイール イベントの基本構文を見てみましょう。

$(selector).on('mousewheel', function(event) { //执行操作 });

上記のコードでは、selectorはバインドする必要があるセレクターを示します。マウス ホイール イベント。mousewheelはマウス ホイール イベントの名前です。マウス ホイール イベントがトリガーされると、指定された機能が実行されます。

関数を実行するときは、マウス ホイール イベントに関する情報を含むeventオブジェクトを渡す必要があります。このうち、event.originalEventプロパティには、元のマウス ホイール イベント オブジェクトが含まれており、ホイールの回転距離を取得できます。

次に、マウスホイールのスクロール距離を取得する方法を見てみましょう。

方法 1:event.originalEventオブジェクトを使用する

$(selector).on('mousewheel', function(event) { var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; //执行操作 });

上記のコードでは、現在のブラウザがwheelDelta属性をサポートしている場合、属性の値はdelta変数に割り当てられます。それ以外の場合は、detail属性の逆をdelta変数に割り当てます。detailプロパティはマウス ホイールが毎回回転する距離を表し、wheelDeltaプロパティはマウス ホイールが回転する距離を表します。

wheelDeltaの値は正または負にすることができますが、detailの値は正または 0 のみであることに注意してください。したがって、さまざまなブラウザやオペレーティング システムと互換性を持たせるには、-event.originalEvent.detailを使用してホイールのスクロール距離を取得する必要があります。

方法 2:event.originalEvent.deltaYプロパティを使用する

$(selector).on('mousewheel', function(event) { var delta = event.originalEvent.deltaY; //执行操作 });

上記のコードでは、deltaYプロパティを直接使用してマウスを取得しますホイールのスクロール距離。この属性は一部のブラウザーとオペレーティング システムでのみサポートされているため、信頼性がないことに注意してください。

要約すると、上記の 2 つの方法を使用して、マウス ホイールの回転距離を取得できます。ただし、実際の開発プロセスでは、さまざまなブラウザやオペレーティング システムに対応するために、両方の方法を考慮し、できるだけ一般的な方法を使用することが最善です。

要約すると、マウス ホイールの回転距離を取得するコードは次のとおりです:

$(selector).on('mousewheel', function(event) { var delta = 0; if (event.originalEvent) { if (event.originalEvent.wheelDelta) { delta = event.originalEvent.wheelDelta / 120; } else if (event.originalEvent.detail) { delta = -event.originalEvent.detail / 3; } else if (event.originalEvent.deltaY) { delta = event.originalEvent.deltaY / 120; } } //执行操作 });

上記のコードでは、まずdelta変数を 0 に初期化します。 JUJGEevent.originalEvent属性が存在するかどうか。存在する場合は、wheelDelta、detail、deltaY属性が存在するかどうかをさらに判断します。存在する場合、属性値に基づいて計算され、ホイールが回転する距離。最後に、適切なアクションを実行します。

この記事が、読者が jQuery を使用してマウス ホイールの回転距離を取得する方法を理解し、習得するのに役立つことを願っています。

以上がjqueryでマウスホイールのスクロール距離を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。