Question

我通过更改Javascript中的scrollLeft属性来滚动溢出的DIV内容：

setInterval(function(){
  $('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+1);
}, 50);

但是，我想在用户使用鼠标滚动内容后立即停止此操作。我试图使用滚动事件

来检测这个

$('#scrollbox').scroll(function(){...});

但是，我上面的自动滚动也会触发该事件。我如何区分这个并且只对用户启动的滚动作出反应？（或者：如何阻止上面的代码触发滚动事件？这也可以解决问题）

Answer 1

当鼠标悬停在滚动框元素上时，您可以使用.hover()：函数停止滚动：

http://jsfiddle.net/bGHAH/1/

setInterval(function(){
    if(!mouseover)
    {
       $('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+1);
    }
}, 50);

var mouseover = false;
$('#scrollbox').hover(function(){
    mouseover = true;
},function(){
    mouseover = false;    
});

修改

根据您的评论，我设法从以下网站找到了一个jquery插件：special scroll events for jquery。

此插件包含一个事件，该事件尝试根据上次滚动步骤与检查时间之间经过的时间段确定滚动是否已停止。

为了使这个工作起作用，我需要将你的间隔减慢到刚好超过插件使用的延迟，这个延迟时间为310毫秒。这样做意味着我必须增加滚动步骤以使其明显移动。

这是链接：

http://jsfiddle.net/EWACn/1/

这是代码：

var stopAutoScroll = false; $(document).ready(function(){ setInterval(function(){ if(!stopAutoScroll) { $('#status').html('scrolling'); $('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+10); }else{ $('#status').html('not scrolling'); } }, 310); $('#scrollbox').bind('scrollstart', function(e){ stopAutoScroll = true; }); $('#scrollbox').bind('scrollstop', function(e){ stopAutoScroll = false; }); });

希望这会有所帮助。

Answer 2

对于FF（Mozilla）：

document.addEventListener('DOMMouseScroll', handler, false);

对于IE，Opera和Chrome：

document.onmousewheel = handler;

Answer 3

另一种选择是在编程滚动之前设置一个外部标志，然后重置字。如果触发了scroll事件并且未设置此标志，则表示用户负责并且可以采取相应的行动。

不幸的是，虽然这是独立于浏览器且易于阅读的，但它可能会让您相信某些用户卷轴是程序化的。但是我认为这种情况的发生很小，可能是值得的，这取决于你正在编写的应用程序。

Answer 4

对于大多数现代浏览器，请尝试wheel event

当旋转指点设备（通常是鼠标）的滚轮按钮时，会触发滚轮事件。

如何在JavaScript中以编程方式区分鼠标滚动和滚动？

4 个答案: