在jQuery中是否有一种方法可以获取鼠标滚轮事件(不是scroll
事件)?
@DarinDimitrov发布的插件jquery-mousewheel
在jQuery 3+中已经无法使用。建议使用jquery-wheel
,该插件适用于jQuery 3+。
如果你不想使用jQuery,MDN强烈警告不要使用mousewheel
事件,因为它是非标准的,在很多地方都不被支持。相反,它建议你应该使用wheel
事件,因为它可以更精确地获取值的含义。它被大多数主流浏览器支持。
我认为许多关键的事情有点分散,我需要阅读所有答案才能使我的代码按照我想要的方式工作,因此我将在一个地方发布我的发现:
"wheel"
事件而不是其他已弃用或特定于浏览器的事件。x>0
的相反数是x<=0
,x<0
的相反数是x>=0
,这里的许多答案会在x=0
(水平滚动)时错误地触发向下或向上滚动。setTimeout()
,延迟50毫秒更改一些辅助标志isWaiting=false
,并通过if(isWaiting)
保护自己,然后不做任何事情。当它触发时,您手动更改isWaiting=true
,并在此行正下方开始setTimeout,稍后再次更改isWaiting=false
。我的组合看起来像这样。每次向下/向上滚动时都会淡出和淡入。否则,您必须向上滚动到标题处,才能使标题淡入。
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);
}
});
上面那个不适合触摸/移动设备,我认为这个更适合所有移动设备:
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;
});
delta
:$('#my-element').on('mousewheel', function(event, delta) {
if(delta > 0) {
console.log('scroll up');
}
else {
console.log('scroll down');
}
});
最近我遇到了同样的问题,$(window).mousewheel
返回了 undefined
我所做的是 $(window).on('mousewheel', function() {});
为了进一步处理它,我正在使用:
function (event) {
var direction = null,
key;
if (event.type === 'mousewheel') {
if (yourFunctionForGetMouseWheelDirection(event) > 0) {
direction = 'up';
} else {
direction = 'down';
}
}
}
$(el).on('input',...
。 - rybo111