jQuery でマウス ホイール イベントを検出して処理する方法は?

jQuery でのマウス ホイール イベント処理

jQuery は、スクロール イベントを含むさまざまなユーザー イベントを処理するための強力なサポートを提供しますが、必要な場合があります。具体的にマウス ホイール イベントをキャプチャします。これは、たとえば、マウス駆動の UI 機能やカスタム スクロール機能を実装する場合に便利です。

jQuery マウス ホイール イベント:

jQuery でマウス ホイール イベントを処理するには、マウスホイール イベント バインダーを利用できます。このイベントは、ユーザーがマウス ホイールでスクロールするとトリガーされます。イベント オブジェクト (e で表される) には、ホイール スクロールの方向を提供するプロパティoriginalEvent.wheelDelta が含まれています。

ホイール スクロール方向のキャプチャ:

チェックoriginalEvent.wheelDelta / 120 の値で、スクロール方向を決定できます。

• 正の値は上向きのスクロール (ページの上部に向かってスクロール) を示します。
• 負の値は下向きのスクロールを示します。スクロール (ページの下部に向かってスクロール)。

使用例:

マウス ホイール イベント処理の実装方法を示すために、次の jQuery コードを検討してください。 :

$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
            console.log('scrolling up !');
        }
        else{
            console.log('scrolling down !');
        }
    });
});

この例では、mousewheel イベントを ID「foo」の要素にバインドします。ユーザーがこの要素上でマウス ホイールをスクロールすると、イベント ハンドラーがトリガーされ、スクロール方向をコンソールに記録します。

以上がjQuery でマウス ホイール イベントを検出して処理する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。