在jQuery中获取鼠标滚轮事件?

Is there a way to get the mouse wheel events (not talking about scroll events) in jQuery?

在jQuery中是否有办法获得鼠标滚轮事件(不是在讨论滚动事件)?

14 个解决方案

#1

There's a plugin that detects up/down mouse wheel and velocity over a region.

有一个插件可以检测鼠标滚轮和速度在一个区域。

#2

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

#3

Binding to both mousewheel and DOMMouseScroll ended up working really well for me:

对鼠标滚轮和DOMMouseScroll的绑定最终对我很有效:

$(window).bind('mousewheel DOMMouseScroll', function(event){
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        // scroll up
    }
    else {
        // scroll down
    }
});

This method is working in IE9+, Chrome 33, and Firefox 27.

该方法在IE9+、Chrome 33和Firefox 27中都有使用。

---

Edit - Mar 2016

编辑- 2016年3月

I decided to revisit this issue since it's been a while. The MDN page for the scroll event has a great way of retrieving the scroll position that makes use of requestAnimationFrame, which is highly preferable to my previous detection method. I modified their code to provide better compatibility in addition to scroll direction and position:

我决定重新考虑这个问题，因为已经有一段时间了。滚动事件的MDN页面有一个很好的方法来检索使用requestAnimationFrame的滚动位置，这比我以前的检测方法好得多。我修改了他们的代码，以提供更好的兼容性，除了滚动方向和位置:

(function() {
  var supportOffset = window.pageYOffset !== undefined,
    lastKnownPos = 0,
    ticking = false,
    scrollDir,
    currYPos;

  function doSomething(scrollPos, scrollDir) {
    // Your code goes here...
    console.log('scroll pos: ' + scrollPos + ' | scroll dir: ' + scrollDir);
  }

  window.addEventListener('wheel', function(e) {
    currYPos = supportOffset ? window.pageYOffset : document.body.scrollTop;
    scrollDir = lastKnownPos > currYPos ? 'up' : 'down';
    lastKnownPos = currYPos;

    if (!ticking) {
      window.requestAnimationFrame(function() {
        doSomething(lastKnownPos, scrollDir);
        ticking = false;
      });
    }
    ticking = true;
  });
})();

See the Pen Vanilla JS Scroll Tracking by Jesse Dupuy ( @blindside85) on CodePen.

This code is currently working in Chrome v50, Firefox v44, Safari v9, and IE9+

这段代码目前正在Chrome v50、Firefox v44、Safari v9和IE9+中工作。

References:

引用:

• https://developer.mozilla.org/en-US/docs/Web/Events/scroll
• https://developer.mozilla.org/en-US/docs/Web/Events/scroll
• https://developer.mozilla.org/en-US/docs/Web/Events/wheel
• https://developer.mozilla.org/en-US/docs/Web/Events/wheel

#4

Answers talking about "mousewheel" event are refering to a deprecated event. The standard event is simply "wheel". See https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

关于“mousewheel”事件的回答是指一个不赞成的事件。标准事件只是“车轮”。参见https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

#5

As of now in 2017, you can just write

到2017年，你就可以写作了。

$(window).on('wheel', function(event){

  // deltaY obviously records vertical scroll, deltaX and deltaZ exist too
  if(event.originalEvent.deltaY < 0){
    // wheeled up
  }
  else {
    // wheeled down
  }
});

Works with current Firefox 51, Chrome 56, IE9+

使用当前的Firefox 51, Chrome 56, IE9+。

#6

This worked for me:)

这为我工作)

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.originalEvent.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta < 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

from *

从*

#7

Here is a vanilla solution. Can be used in jQuery if the event passed to the function is event.originalEvent which jQuery makes available as property of the jQuery event. Or if inside the callback function under we add before first line: event = event.originalEvent;.

这是一个香草的溶液。如果传递给函数的事件是事件，则可以在jQuery中使用。jQuery提供的原始事件，作为jQuery事件的属性。或者，如果在回调函数中，在第一行之前添加:event = event = event. originalevent;

This code normalizes the wheel speed/amount and is positive for what would be a forward scroll in a typical mouse, and negative in a backward mouse wheel movement.

这段代码使车轮的速度和数量正常，并且对于一个典型的鼠标的前向滚动是积极的，在向后的鼠标滚轮运动中是负的。

Demo: http://jsfiddle.net/BXhzD/

var wheel = document.getElementById('wheel');

function report(ammout) {
    wheel.innerHTML = 'wheel ammout: ' + ammout;
}

function callback(event) {
    var normalized;
    if (event.wheelDelta) {
        normalized = (event.wheelDelta % 120 - 0) == -0 ? event.wheelDelta / 120 : event.wheelDelta / 12;
    } else {
        var rawAmmount = event.deltaY ? event.deltaY : event.detail;
        normalized = -(rawAmmount % 3 ? rawAmmount * 10 : rawAmmount / 3);
    }
    report(normalized);
}

var event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
window.addEventListener(event, callback);

There is also a plugin for jQuery, which is more verbose in the code and some extra sugar: https://github.com/brandonaaron/jquery-mousewheel

还有一个jQuery插件，它在代码中更加详细，还有一些额外的内容:https://github.com/brandonaaron/jquerymousewheel。

#8

This is working in each IE, Firefox and Chrome's latest versions.

这是在每个IE, Firefox和Chrome的最新版本。

$(document).ready(function(){
        $('#whole').bind('DOMMouseScroll mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
                alert("up");
            }
            else{
                alert("down");
            }
        });
    });

#9

I was stuck in this issue today and found this code is working fine for me

我今天被困在这个问题中，发现这段代码对我来说很正常。

$('#content').on('mousewheel', function(event) {
    //console.log(event.deltaX, event.deltaY, event.deltaFactor);
    if(event.deltaY > 0) {
      console.log('scroll up');
    } else {
      console.log('scroll down');
    }
});

#10

use this code

使用这个代码

 knob.bind('mousewheel', function(e){  
 if(e.originalEvent.wheelDelta < 0) {
    moveKnob('down');
  } else {
    moveKnob('up');
 }
  return false;
});

#11

my combination looks like this. it fades out and fades in on each scroll down/up. otherwise you have to scroll up to the header, for fading the header in.

我的组合是这样的。它会淡出，并逐渐消失在每一卷上。否则，您必须向上滚动到头部，以使页眉消失。

var header = $("#header");
$('#content-container').bind('mousewheel', function(e){
    if(e.originalEvent.wheelDelta > 0) {
        if (header.data('faded')) {
            header.data('faded', 0).stop(true).fadeTo(800, 1);
        }
    }
    else{
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);
    }
});

the above one is not optimized for touch/mobile, I think this one does it better for all mobile:

上面的这款没有针对touch/mobile进行优化，我认为这款手机对所有手机都有好处:

var iScrollPos = 0;
var header = $("#header");
$('#content-container').scroll(function () {

    var iCurScrollPos = $(this).scrollTop();
    if (iCurScrollPos > iScrollPos) {
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);

    } else {
        //Scrolling Up
        if (header.data('faded')) {
            header.data('faded', 0).stop(true).fadeTo(800, 1);
        }
    }
    iScrollPos = iCurScrollPos;

});

#12

The plugin that @DarinDimitrov posted, jquery-mousewheel, is broken with jQuery 3+. It would be more advisable to use jquery-wheel which works with jQuery 3+.

@DarinDimitrov发布的插件，jquerymousewheel，被jQuery 3+打破。更明智的做法是使用jQuery 3+的jquerywheel。

If you don't want to go the jQuery route, MDN highly cautions using the mousewheel event as it's nonstandard and unsupported in many places. It instead says that you should use the wheel event as you get much more specificity over exactly what the values you're getting mean. It's supported by most major browsers.

如果您不想使用jQuery路由，那么MDN非常注意使用mousewheel事件，因为它在很多地方都是不标准和不支持的。相反，它说，你应该使用轮事件，因为你得到了更具体的值，你得到的值是什么意思。它得到了大多数主流浏览器的支持。

#13

If using mentioned jquery mousewheel plugin, then what about to use the 2nd argument of event handler function - delta:

如果使用提到的jquery mousewheel插件，那么如何使用事件处理函数的第二个参数- delta:

$('#my-element').on('mousewheel', function(event, delta) {
    if(delta > 0) {
    console.log('scroll up');
    } 
    else {
    console.log('scroll down');
    }
});

#14

I got same problem recently where $(window).mousewheel was returning undefined

我最近遇到了同样的问题，$(窗口)。mousewheel是返回未定义

What I did was $(window).on('mousewheel', function() {});

我所做的是$(窗口)。(“mousewheel”功能(){ });

Further to process it I am using:

我正在使用:

function (event) {
    var direction = null,
        key;

    if (event.type === 'mousewheel') {
        if (yourFunctionForGetMouseWheelDirection(event) > 0) {
            direction = 'up';
        } else {
            direction = 'down';
        }
    }
}