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判断用户是否正在滚动滚动条,滚动条滚动是否停止的更多相关文章

  1. js判断用户是客户端还是移动端

    js判断用户是客户端还是移动端 Javascript 判断客户端是否为 PC 还是手持设备,有时候项目中需要用到,很方便的源生检测,方法一共有两种   1.第一种: function IsPC() { ...

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

    最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="te ...

  3. [开发笔记]-js判断用户的浏览设备是移动设备还是PC

    最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="te ...

  4. js判断用户是在PC端或移动端访问

    js如何判断用户是在PC端和还是移动端访问.  最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的体验.伴随Android平台的红火发展.不仅带动国内智能手机行业,而 ...

  5. js判断用户是否离开当前页面

    简介 VisibilityChange 事件:用于判断用户是否离开当前页面 Code // 页面的 visibility 属性可能返回三种状态 // prerender,visible 和 hidde ...

  6. js判断用户关闭页面或浏览器

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

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

    在以前坐项目的时候,经常碰见通过sessionLisnter来判断用户是否在线的方法,但是由于用户关闭浏览器时不会立刻是否session,因此大部分时候都考虑在页面中通过JS来监控页面是否关闭. 网络 ...

  8. 用JS判断用户使用的是手机端还是pc端访问

    最近项目中用到一个应用,当访问同一个网站地址的时候,例如:www.xxx.com的时候,如果当前客户端是pc则跳转到专注于pc的部分,如果当前客户机是手机,则跳转到专注于手机的部分,秉承一贯的习惯,b ...

  9. 微信扫描下载提示以及js判断用户手机系统

            今天抽空也写一下这个教程吧,这里面涉及到就是一个APP的页面下载.公司有这个需求,让做一个页面,就是二维码扫描下载.一开始我做的版本是只能是通过浏览器来下载的,但是实际应用中,很多用户 ...

随机推荐

  1. webpack入门之简单例子跑起来

    webpack介绍 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载的模块进行代码分割,等到实际需要的时 ...

  2. 读书笔记--SQL必知必会05--高级数据过滤

    5.1 组合使用WHERE子句 操作符(operator)也称为逻辑操作符(logical operator),用来联结或改变WHERE子句中的过滤条件. 5.1.1 AND操作符 在WHERE子句中 ...

  3. 【干货】”首个“ .NET Core 验证码组件

    前言 众所周知,Dotnet Core目前没有图形API,以前的System.Drawing程序集并没有包含在Dotnet Core 1.0环境中.不过在dotnet core labs项目里可以见到 ...

  4. C#泛型方法解析

    C#2.0引入了泛型这个特性,由于泛型的引入,在一定程度上极大的增强了C#的生命力,可以完成C#1.0时需要编写复杂代码才可以完成的一些功能.但是作为开发者,对于泛型可谓是又爱又恨,爱的是其强大的功能 ...

  5. 不得不吐槽的Android PopupWindow的几个痛点(实现带箭头的上下文菜单遇到的坑)

    说到PopupWindow,我个人感觉是又爱又恨,没有深入使用之前总觉得这个东西应该很简单,很好用,但是真正使用PopupWindow实现一些效果的时候总会遇到一些问题,但是即便是人家的api有问题, ...

  6. TCP初始化序列号ISN

    TCP初始化序列号ISN TCP初始化序列号不能设置为一个固定值,因为这样容易被攻击者猜出后续序列号,从而遭到攻击. RFC1948中提出了一个较好的初始化序列号ISN随机生成算法. ISN = M ...

  7. Effective前端1:能使用html/css解决的问题就不要使用JS

    div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...

  8. <input type="file">上传文件并添加路径到数据库

    注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...

  9. zeroclipboard浏览器复制插件使用记录

    一个简单例子: <html> <body> <button id="copy-button" data-clipboard-text="Co ...

  10. C#[Win32&WinCE&WM]应用程序只能运行一个实例:MutexHelper

    前言 在开发应用程序时,通常只让程序运行一个实例.所以,就要判断程序是否已经运行. 下面是我自己在项目中使用到,封装好的帮助类.有 普通的 C# 应用程序 和 Windows CE 和 Windows ...