• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > JS、jQ >  js判断用户是否正在滚正文

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

作者:网页模板
类型:文章教程
点击次数:
发布时间:2017-06-28 16:38
分享到:
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();
   }
}

(责任编辑:网页模板)
  • 本文标签:
  • js滚动条
js数组去重,js数据重复值去除的方法
js轮播图无缝滚动效果_javascript技巧