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