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

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来自以下站点的插件：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

另一种选择是拥有一个外部标志，您可以在编程滚动之前设置该标志，然后重置后记。如果触发了滚动事件并且未设置此标志，您就知道用户负责并可以采取相应的操作。

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

Answer 4

对于大多数现代浏览器，尝试 wheel 事件

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