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 サイトの他の関連記事を参照してください。