鼠标滚轮事件和Scroll事件海誓山盟
问题描述:
我的问题矛盾的是这样的:鼠标滚轮事件和Scroll事件海誓山盟
我有一个鼠标滚轮事件(从插件:https://github.com/brandonaaron/jquery-mousewheel)触发功能:
$(document).on('mousewheel', onMouseWheel);
function onMouseWheel(event,delta)
{ Code... }
我也有一个滚动事件触发另一个功能:
$(document).on('scroll', onScroll);
function onScroll()
{ Code... }
但是使用mouswheel时,这两个事件被触发,因此这两种功能运行,我不希望他们。因为使用鼠标滚轮并拖动滚动条,所以它们必须单独分开。这个问题只发生在周围。通过拖动滚动条不会触发鼠标滚轮功能。
编辑:
我一点点的帮助实现,所发生的问题,因为我用ScrollLeft()我的鼠标滚轮的功能,这当然会导致滚动事件中。
我试图想到一个解决方案,但没有运气。谁能帮忙?谢谢!
编辑:更多的代码:
$(document).on('scroll', onScroll);
function onScroll()
{
code...
}
$(document).on('mousewheel', onMouseWheel));
function onMouseWheel(event,delta)
{
event.preventDefault();
if(delta<0)
{
detectDown();
}
else if(delta>0)
{
detectUp();
}
return false;
}
$(document).on("keydown", onKeyDown);
function onKeyDown(e)
{
event.preventDefault();
if (e.keyCode == 37)
{
detectUp();
}
else if (e.keyCode == 39)
{
detectDown();
}
}
function detectUp()
{
$("html, body").animate({scrollLeft:(currentElement.prev().position().left - 100)}, 800, 'easeOutQuad');
currentElement = currentElement.prev();
}
function detectDown()
{
$("html, body").animate({scrollLeft:(currentElement.next().position().left - 100)}, 800, 'easeOutQuad');
}
或许这可以帮助?
答
在onMouseWheel
函数的末尾添加return false
。
function onMouseWheel(event, delta) {
// code
return false;
}
这将禁用为'mousewheel'
事件的默认滚动操作,因此'scroll'
事件将不会被触发。
+0
谢谢!我已经有一个event.preventDefault();.但是,由于你的评论,我意识到我在鼠标滚轮功能中有一个ScrollLeft(),这当然会导致问题。无论如何没有这个混乱吗? –
答
我来实现,最好的解决办法是让一个自定义的滚动条。这样我们可以避免调用滚动功能,并让不同类型的滚动互相干扰。
您是否尝试过'event.stopImmediatePropagation()'鼠标滚轮事件。 – James
谢谢,但没有它没有帮助。也许我做错了。我添加了更多的代码,所以你可以看到上下文。 –