zoukankan      html  css  js  c++  java
  • 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(); } }
  • 相关阅读:
    装饰器和表达生成式
    函数
    字符编码
    函数基础
    列表,字典与集合
    Linux Semaphore
    tp5安装easyWeChat
    wx.request
    小程序设计规范
    小程序的概念和特点
  • 原文地址:https://www.cnblogs.com/hdwang/p/4875678.html
Copyright © 2011-2022 走看看