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();
   }
}
时间: 2024-12-24 23:04:58

js判断用户是否正在滚动滚动条,滚动条滚动是否停止的相关文章

js判断用户的浏览器设备是移动端还是pc端

最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="text/javascript"> function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "i

JS判断用户是否在线的方法

在以前坐项目的时候,经常碰见通过sessionLisnter来判断用户是否在线的方法,但是由于用户关闭浏览器时不会立刻是否session,因此大部分时候都考虑在页面中通过JS来监控页面是否关闭. 网络上常见的方法有: window.onbeforeunload window.onunload 众说纷纭,经过实验:(IE11,chrome,FireFox) window.onbeforeunload:三个浏览器在通过右上角关闭按钮来关闭的时候,会触发事件.但是页面通过F5来刷新的时候也会触发事件.

用百度siteapp的uaredirect.js判断用户访问端而进行域名的自动跳转

首先在你的head中嵌入这段代码 <script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/javascript"></script> <script type="text/javascript">uaredirect("http://m.caijiayou.com","

[JS] js 判断用户是否在浏览当前页面

var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null; var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange'); var onVisibilityChan

js判断用户进入设备代码

var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf("Linux") == 0

Js - 判断用户是否上网(连接网络) - HTML5在线、离线online的使用

(文中对兼容性的测试还未全部完成) 通过对html5的navigator新特性的onLine属性判断,可轻松搞定是否在线的判断(true:在线:false:离线). 兼容性: (已测)IE6+.Safari 5+支持的比较好: (未测)Firefox 3+也支持navigator.onLine属性,但你必须手工选中菜单项“文件-Web开发人员(设置)-脱机工作”才能让浏览器正常的工作: (未测)Chrome需要12以上: 1.代码实现: if(window.navigator.onLine==t

js判断用户是输入的地址请求的路径

1 /** 2 * 如果是直接输入url访问的则刷新页面(防止缓存页面)针对Chrome,其他浏览器刷新referrer始终会为空,所以给个随机路径访问就加载不到缓存了. 3 */ 4 var userAgent = navigator.userAgent; // 获得浏览器的userAgent字符串 5 if(userAgent.indexOf("Chrome") > -1) { 6 if(document.referrer == "") { 7 docum

在浏览器中如何用js判断用户是通过点击的链接进来的页面,还是直接通过输入url地址栏进来的页面。

<script> if (document.referrer=="") { alert("直接输入地址或者使用特殊跳转!"); window.location.href="/"; } </script>

JS判断用户手机是IOS还是Android

$(function () { var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isAndroid) { alert("安卓机!"