首页 > 建站教程 > JS、jQ、TS >  js判断用户是否正在滚动滚动条,滚动条滚动是否停止正文

js判断用户是否正在滚动滚动条,滚动条滚动是否停止

js智能判断是否可以自动滚动

比如,做一个音乐播放器,边播放,边定位歌词,播放的时候,需要自动定位到播放语句,但是用户去拖动或者滚动div(歌词面板)时,这时就必须停止自动滚动,或者说是不能自动滚动,这个怎么做呢? 如果能时时判断 用户是否在滚动就好了? 或者能够 知道滚动开始 和 结束事件 也行? 可惜均不知道! 目前,仅可以利用的就是div元素的滚动事件,下面是我的实现思路,如何判断用户是否滚动停止?

1.html代码
<div id="panel">
   <div id="div1"></div>
   <div id="div2"></div>
   <a name="div3Anchor"> </a>
   <div id="div3"></div>
</div>

2.js代码
//默认,播放时可以自动定位播放语句
window.canAutoScroll = true;
//只要滚动事件发生,就停止自动滚动定位方法的执行
var timeout = null;
var panel = $("#panel");
panel.scroll(function(){
    if(timeout != null){
       window.clearTimeout(timeout);
    }
    window.canAutoScroll = false;
    //500ms后,假定认为停止滚动
    timeout = window.setTimeout(function(){
        window.canAutoScroll = true;
    },500);
});

//播放事件
var playEvent = function(time){
   //滚动到指定语句
   var autoScroll = function(){
        var panel = $("#panel");
        var div3 = document.getElementById("div3");
        panel.animate({
              scrollTop: div3.offsetTop - panel.height() / 2
        }, 200);
    }
   if(window.canAutoScroll){
        autoScroll();
   }
}