js 判断滚动条是否停止滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js判断滚动条停止</title>
<style type="text/css">
.box {
height: 3000px;
}
</style>
<script type="text/javascript">
var topValue = 0, // 上次滚动条到顶部的距离
interval = null; // 定时器
document.onscroll = function() {
if(interval == null) {
// 未发起时，启动定时器，1秒1执行
interval = setInterval(function() {
if(document.documentElement.scrollTop == topValue) {
alert("scroll bar is stopping!");
clearInterval(interval);
interval = null;
}
}, 1000);
}
topValue = document.documentElement.scrollTop;
}
</script>
</head>
<div class="box"></div>
<body>
</body>
</html>
这个需求是我在写一个固钉的时候遇到的问题,当滚动条滚动时固钉隐藏,当停止滚动时固钉出现
js 判断滚动条是否停止滚动的更多相关文章
- JS判断滚动条是否停止滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js判断滚动条是否已到页面最底部或顶部实例
原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...
- js判断用户是否正在滚动滚动条，滚动条滚动是否停止
js智能判断是否可以自动滚动 比如,做一个音乐播放器,边播放,边定位歌词,播放的时候,需要自动定位到播放语句,但是用户去拖动或者滚动div(歌词面板)时,这时就必须停止自动滚动,或者说是不能自动滚动, ...
- 原生js判断手机端页面滚动停止
var topValue = 0,// 上次滚动条到顶部的距离 interval = null;// 定时器 contactsList = document.getElementById(" ...
- js判断滚动条到底部
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容 ...
- IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部
E/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到 ...
- js判断鼠标是否停止移动
本程序实现当鼠标在一个特定的div内悬停n秒时,判断出已经停止移动. 思路: 1.定义全局变量鼠标移动状态imouse,定时器timer.当鼠标在div内移动时,imouse值为1,相反静止时值为0: ...
- JS判断滚动条到底部，页面是否有滚动条
要判断页面滚动条是否到底,需要了解三个属性: scrollHeight:获取元素内容高度的度量,包括由于溢出导致的视图中不可见内容,说直白点,算上了滚动条不可见的那部分高度. clientHeight ...
- js 判断滚动条的滚动方向
以下代码实现判断页面的滚动条的滚动方向: var sign = 80;//定义默认的向上滚与向下滚的边界 window.onscroll = window.onresize = function(){ ...
随机推荐
- CodeForces - 429A Xor-tree
Iahub is very proud of his recent discovery, propagating trees. Right now, he invented a new tree, c ...
- requests保持登录session ,cookie 和 token
一.request提供了一个一个叫做session的类,来实现客户端和服务端的会话保持 # coding:utf-8 import requests url = "https://passp ...
- Oracle备份归档日志文件的两种方法比较
备份归档日志方式有两种: 1 单独备份归档日志:backup archivelog all 2 在执行备库时一起备份归档日志:backup database plus archivelog; 这 ...
- FMX取得屏分辨率
procedure Tfrm_Main.FormCreate(Sender: TObject); var ScreenSvc: IFMXScreenService; Size: TPointF; be ...
- h5 手机端适配问题汇总
1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器 能识别 a标签中href的 javascript:; 为网址 , 55555 3.safari 的弹框如 ...
- Enhancement in SAP abap.
Recently I have been taught through how to do enhancement for those standard programs. Th reason for ...
- python 基础 内置函数 和lambda表达式
1.把任意数值转化为字符串有两种方法. (1)str()用于将数值转化为易于人读的形式.print(str("我是中国人"))>>>我是中国人 (2)repr() ...
- 有两艘船需要装运的n箱货物，第一艘船的载重量是c1，第二艘船的载重量是c2，wi是货箱i的重量，且w1+w2+……+wn<=c1+c2
(1) 问题描述: 有两艘船和需要装运的n个货箱,第一艘船的载重量是c1,第二艘船的载重量是c2,wi是货箱的质量,且w1+w2+...+wn <= c1+c2. 希望确定是否有一 ...
- python 实现 KNN 分类器——手写识别
1 算法概述 1.1 优劣 优点:进度高,对异常值不敏感,无数据输入假定 缺点:计算复杂度高,空间复杂度高 应用:主要用于文本分类,相似推荐 适用数据范围:数值型和标称型 1.2 算法伪代码 (1)计 ...
- 【转载】 A* 寻路算法 (个人认为最详细,最通俗易懂的一个版本)
原文地址: http://www.cppblog.com/christanxw/archive/2006/04/07/5126.html =============================== ...