[转] 判断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 ...
随机推荐
- Sqli-labs less 27
Less-27 本关主要考察将union,select和26关过滤掉的字符.此处我们依旧和26关的方式是一样的,只需要将union和select改为大小写混合就可以突破. 示例:127.0.0.1/s ...
- Edius 安装 looks插件整理
需要安装looks插件到指定目录,在后面桥接时选择该目录. 包括安装looksbuilder插件.
- div滚动条
给DIV限定宽度或高度,并指定overflow样式为auto,这样当内空超出后就会自动出现滚动条了.如<div style="width:100px; height:100px; ov ...
- 欧拉工程第53题：Combinatoric selections
package projecteuler51to60; class p53{ void solve1(){ int count=0; int Max=1000000; int[][] table=ne ...
- 8 simple things that will make you sexy
8 simple things that will make you sexy8种方法教你不动声色的性感What makes a women sexy? Is it her body? Is it t ...
- vmware通过vmnet8共享本地网络
转载于:http://zhaolongchn.blog.163.com/blog/static/19065850420122595117886/ 1,首先将真实电脑的虚拟网卡VMnet8启用 2,然后 ...
- SMB2 Protocol – 简介（应用层协议主要用于在计算机间共享文件、打印机、串口等）
SMB2 Protocol – 简介 SMB协议简介: 服务器信息块(SMB)协议是一个应用层协议主要用于在计算机间共享文件.打印机.串口等. 在介绍SMB协议的时候,一般提到使用的端口为139,44 ...
- Struts2笔记——与ServletAPI解耦
与ServletAPI解耦的访问方式 为了避免与 Servlet API 耦合在一起, 方便 Action 做单元测试, Struts2 对 HttpServletRequest, HttpSessi ...
- SQLServer错误代码解释
SQLServer出现错误的代码大全(好用) Code Error Message 0 操作成功完成. 1 功能错误. 2 系统找不到指定的文件. 3 系统找不到指定的路径. 4 系统无法打开文件. ...
- 页面关键词Meta Keywords和描述Description的优化作用
前几日有两三个童鞋们问我为什么文章目录页面没有设置关键词,我原先还以为什么关键词,后来才明白是问我为什么不添加Meta Keywords.关于这个问题我直接回应他们说目录页面Meta Keywords ...