[转] 判断html页是否滚动停止
原文链接：http://www.phpernote.com/javascript-function/754.html
最近有个项目中遇到这样一个问题：
有一个用于展示数据的带滚动条的DIV块，业务需求是当滚动条滚动时，将数据库中的数据读出并展示出来。这个本身问题不大，但实际中却发现存在这样一个问题，即当数据量比较大的时候，当滚动条滚动时，会不停的向后台发出数据请求，这个在访问量达到一定规模的时候，对服务器和浏览器都造成了巨大的压力。
为了解决这个问题，作者想到一个办法是当滚动条停止时，才向服务器发送请求数据。但是碰到个问题就是如何判断滚动条是否停止了呢？经过几番研究终于解决了，在这里作者和大家分享一下如何通过js判断浏览器滚动条是否停止滚动（这里的效果是兼容IE和火狐浏览器）。
<html xmlns="http://www.phpernote.com/javascript-function/194.html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS判断滚动条是否停止滚动示例</title>
<script type="text/javascript">
var topValue=0,// 上次滚动条到顶部的距离
interval=null;// 定时器
window.onscroll=function(){
if(interval==null)
interval=setInterval("test()",1000);//这里就是判定时间，当前是1秒一判定
topValue=document.documentElement.scrollTop;
} function test(){
// 判断此刻到顶部的距离是否和1秒前的距离相等
if(document.documentElement.scrollTop==topValue){
alert("滚动条停止滚动了!");
clearInterval(interval);
interval=null;
}
}
</script>
</head>
<body>
<div style="height:2000px;">http://www.phpernote.com/jquery/251.html</div>
</body>
</html>
以上可以更改定时判断的时间，时间越短，相应的越及时，用户体验效果越好，但相应的客户端浏览器的压力会越大。
[转] 判断html页是否滚动停止的更多相关文章
- 原生js判断手机端页面滚动停止
var topValue = 0,// 上次滚动条到顶部的距离 interval = null;// 定时器 contactsList = document.getElementById(" ...
- js判断用户是否正在滚动滚动条，滚动条滚动是否停止
js智能判断是否可以自动滚动 比如,做一个音乐播放器,边播放,边定位歌词,播放的时候,需要自动定位到播放语句,但是用户去拖动或者滚动div(歌词面板)时,这时就必须停止自动滚动,或者说是不能自动滚动, ...
- android ScrollView滚动距离和判断滚动停止状态
今天很高兴,自己解决了判断ScrollView滚动停止的监听,现在分享给大家. 因为ScrollView没有像listView中的setOnScrollListener()监听,当然也就没有SCROL ...
- 基于html5海贼王单页视差滚动特效
分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="top"> < ...
- singer页左侧滚动的时候右侧跟随高亮显示
1.封装scroll.vue的listenScroll属性和方法,用来确定监听listview.vue的滚动事件 2.将listview.vue的listenScroll属性默认设置为true; 3. ...
- iOS:判断引导页首次出现、版本更新
判断引导页首次出现方式: //选择根控制器 +(void)chooseRootViewController{ //初始化Window窗口 [AppDelegate Delegate].window = ...
- javascript实现双击网页自动滚动，单击滚动停止
当网页中有长篇文章时,浏览起来就比较吃劲了,想想一边忙着拖动滚动条,一边忙着浏览,确实挺累人的.为了客人能够轻松的浏览,我们可以使用script代码实现网页的自动滚屏,当双击网页的时候,网页将会自动向 ...
- js实现相册翻页，滚动，切换，轮播功能
我们在做web开发的时候,前台的效果要求是很高的,因为对于不懂程序的用户来说,前台的视觉冲击,无疑是对我们产品的第一印象. 在完成web图片各种功能上,很多框架有很绚丽的效果,但今天我们来看看用原生的 ...
- IOS UIScrollView + UIButton 实现segemet页面和顶部标签页水平滚动效果
很长一段时间没有写博客了,最近在学习iOS开发,看了不少的代码,自己用UIScrollView和UIButton实现了水平滚动的效果,有点类似于今日头条的主界面框架,效果如下: 代码如下: MyScr ...
随机推荐
- MySQL 百万级分页优化
MySQL 百万级分页优化 http://www.jb51.net/article/31868.htm 一般刚开始学SQL的时候,会这样写 : , ; 但在数据达到百万级的时候,这样写会慢死 : , ...
- 【hadoop】有参考价值的博客整理
好文章的网址: hadoop shuffle机制中针对中间数据的排序过程详解(源代码级) Hadoop mapreduce原理学习 与 Hadoop 对比,如何看待 Spark 技术? 深入理解Had ...
- JavaScript call和apply的用法
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- linux下文件编码的查看与修改
在Linux中查看文件编码可以通过vim编辑器来查看,在vim命令模式下输入如下命令即可: :set fileencoding //在vim中查看文件编码 如果你只是想查看其它编码格式的文件或者想解决 ...
- C++运算符重载——重载二元运算符
1.重载二元操作符的方法 二元运算符又称为双目运算符,即需要2个操作数的运算符,例如 + - * / 等. 运算符重载可以分为3种方式:类的非静态成员函数.类的友元函数.普通函数. 例如有 2 个操作 ...
- C++运算符重载——重载一元运算符
0.重载一元操作符的方法 一元运算符即只需要一个操作用的运算符,如取地址运算符(&).复数(-).自减(--).自加(++)等. 运算符重载可以分为3种方式:类的非静态成员函数.类的友元函数. ...
- Ajax实例-购物车
一.概述 1.当添加或删除商品时,购物车会立即更新数据 2.思路: (1)建立商品类Item.java,存有商品属性name,prince,code(商品编码)等 (2)建立商品目录类Catalog. ...
- STL:string 大小（Size）和容量（Capacity）
strings存在三种“大小”: 1.size()和length() 返回string中现在的字符个数.上述两个函数等效. 成员函数empty()用来检验字符数是否为0,亦即字符串是否为空.你应该优先 ...
- Spring笔记——配置Hibernate框架事务
原文:http://www.iteye.com/topic/1123347 Spring配置文件中关于事务配置总是由三个组成部分,DataSource.TransactionManager和代理机制这 ...
- iOS:核心动画之关键帧动画CAKeyframeAnimation
CAKeyframeAnimation——关键帧动画 关键帧动画,也是CAPropertyAnimation的子类,与CABasicAnimation的区别是: –CABasicAnimation只能 ...