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

2023-11-26

我通过更改滚动溢出的 DIV 内容scrollLeftJavaScript 中的属性:

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

但是,我想在用户使用鼠标自行滚动内容时立即停止此操作。我尝试使用滚动事件来检测这一点

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

但是,我上面的自动滚动也会触发该事件。我如何区分这一点并仅对用户启动的滚动做出反应? (或者:如何阻止上面的代码触发滚动事件?这也可以解决问题)


你可以使用.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;    
});

Edit

根据您的评论,我设法从以下站点找到了一个 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;
});

});

希望这可以帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何区分鼠标滚动和 JavaScript 中以编程方式滚动? 的相关文章

随机推荐