Javascript 在 jQuery 中获取鼠标滚轮事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8189840/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get mouse wheel events in jQuery?
提问by thejh
Is there a way to get the mouse wheel events (not talking about scrollevents) in jQuery?
有没有办法scroll在 jQuery 中获取鼠标滚轮事件（不是谈论事件）？
采纳答案by Darin Dimitrov
回答by mahdi shahbazi
?$(document).ready(function(){
$('#foo').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
console.log('scrolling up !');
}
else{
console.log('scrolling down !');
}
});
});
回答by Jesse Dupuy
Binding to both mousewheeland DOMMouseScrollended up working really well for me:
绑定到两者mousewheel并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;
});
})();This code is currently working in Chrome v50, Firefox v44, Safari v9, and IE9+
此代码目前正在 Chrome v50, Firefox v44, Safari v9, and IE9+
References:
参考：
回答by Louis Ameline
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+
回答by Brian Di Palma
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
谈论“鼠标滚轮”事件的答案是指已弃用的事件。标准事件只是“轮子”。请参阅https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel
回答by Anjith K P
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;
});
回答by Sergio
Here is a vanilla solution. Can be used in jQuery if the event passed to the function is event.originalEventwhich jQuery makes available as property of the jQuery event. Or if inside the callbackfunction under we add before first line: event = event.originalEvent;.
这是一个香草解决方案。如果传递给函数的事件是event.originalEventjQuery 提供的 jQuery 事件属性，则可以在 jQuery 中使用。或者如果callback在我们在第一行之前添加的函数内：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/
演示：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/jquery-mousewheel
回答by futuredayv
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");
}
});
});
回答by Prafull Sharma
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');
}
});
回答by Bal mukund kumar
use this code
使用此代码
knob.bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
moveKnob('down');
} else {
moveKnob('up');
}
return false;
});
