码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-10-13 21:12:14      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:

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判断用户是否正在滚动滚动条,滚动条滚动是否停止

标签:

原文地址:http://www.cnblogs.com/hdwang/p/4875678.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!