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();
}
}
js判断用户是否正在滚动滚动条,滚动条滚动是否停止的更多相关文章
- js判断用户是客户端还是移动端
js判断用户是客户端还是移动端 Javascript 判断客户端是否为 PC 还是手持设备,有时候项目中需要用到,很方便的源生检测,方法一共有两种 1.第一种: function IsPC() { ...
- js判断用户的浏览器设备是移动端还是pc端
最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="te ...
- [开发笔记]-js判断用户的浏览设备是移动设备还是PC
最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="te ...
- js判断用户是在PC端或移动端访问
js如何判断用户是在PC端和还是移动端访问. 最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的体验.伴随Android平台的红火发展.不仅带动国内智能手机行业,而 ...
- js判断用户是否离开当前页面
简介 VisibilityChange 事件:用于判断用户是否离开当前页面 Code // 页面的 visibility 属性可能返回三种状态 // prerender,visible 和 hidde ...
- js判断用户关闭页面或浏览器
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- JS判断用户是否在线的方法
在以前坐项目的时候,经常碰见通过sessionLisnter来判断用户是否在线的方法,但是由于用户关闭浏览器时不会立刻是否session,因此大部分时候都考虑在页面中通过JS来监控页面是否关闭. 网络 ...
- 用JS判断用户使用的是手机端还是pc端访问
最近项目中用到一个应用,当访问同一个网站地址的时候,例如:www.xxx.com的时候,如果当前客户端是pc则跳转到专注于pc的部分,如果当前客户机是手机,则跳转到专注于手机的部分,秉承一贯的习惯,b ...
- 微信扫描下载提示以及js判断用户手机系统
今天抽空也写一下这个教程吧,这里面涉及到就是一个APP的页面下载.公司有这个需求,让做一个页面,就是二维码扫描下载.一开始我做的版本是只能是通过浏览器来下载的,但是实际应用中,很多用户 ...
随机推荐
- 关于安卓6.0权限申请 PermissionDog
最近在一家公司实习,项目中需要用到适配安卓6.0以上的系统,我本来是想用其他人已经写好的权限申请框架来实现的,但是发现跟我的需求有点小区别,所以就自己写了一个 这个权限申请的帮助类很小,只有一个jav ...
- 初识AngularJS 之 HelloWorld和数据绑定
1.Hello World 我用的开发工具是 atom ,大家有需要的话可以找我要安装包嘻嘻 第一步: 写入以下代码: <!DOCTYPE html> <html ng-ap ...
- .NET Core的文件系统[3]:由PhysicalFileProvider构建的物理文件系统
ASP.NET Core应用中使用得最多的还是具体的物理文件,比如配置文件.View文件以及网页上的静态文件,物理文件系统的抽象通过PhysicalFileProvider这个FileProvider ...
- angular2系列教程(三)components
今天,我们要讲的是angualr2的components. 例子
- c 数组与指针的使用注意事项
数组变量和指针变量有一点小小的区别 所以把数组指针赋值给指针变量的时候千万要小心 加入把数组赋值给指针变量,指针变量只会包含数组的地址信息 而对数组的长度一无所知 相当于指针丢失了一部分信息,我们把这 ...
- 【Python五篇慢慢弹(5)】类的继承案例解析,python相关知识延伸
类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...
- ASP.NET Core 中文文档 第四章 MVC(3.6.2 )自定义标签辅助类(Tag Helpers)
原文:Authoring Tag Helpers 作者:Rick Anderson 翻译:张海龙(jiechen) 校对:许登洋(Seay) 示例代码查看与下载 从 Tag Helper 讲起 本篇教 ...
- EntityFramework 事务处理
默认情况下,当EF调用SaveChanges()时,会把生成的所有SQL命令“包”到一个“事务(transaction)”中,只要有一个数据更新操作失败,整个事务将回滚. 在多数情况下,如果你总在数据 ...
- Windows 10 安装 Sql Server 2014 反复提示需要安装 .NET Framework 3.5 SP1 的解决方案
一.首先安装.NET Framework 3.5: 离线安装方式: 1.装载相对应的系统安装盘,我是Windows 10 x64 企业版,所以装载Windows 10 x64 企业版安装镜像ISO,盘 ...
- 通过Java代码实现对数据库的数据进行操作:增删改查
在写代码之前,依然是引用mysql数据库的jar包文件:右键项目-构建路径-设置构建路径-库-添加外部JAR 在数据库中我们已经建立好一个表xs :分别有xuehao xingming xue ...