原文链接：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页是否滚动停止的更多相关文章

  1. 原生js判断手机端页面滚动停止

    var topValue = 0,// 上次滚动条到顶部的距离 interval = null;// 定时器 contactsList = document.getElementById(" ...

  2. js判断用户是否正在滚动滚动条，滚动条滚动是否停止

    js智能判断是否可以自动滚动 比如,做一个音乐播放器,边播放,边定位歌词,播放的时候,需要自动定位到播放语句,但是用户去拖动或者滚动div(歌词面板)时,这时就必须停止自动滚动,或者说是不能自动滚动, ...

  3. android ScrollView滚动距离和判断滚动停止状态

    今天很高兴,自己解决了判断ScrollView滚动停止的监听,现在分享给大家. 因为ScrollView没有像listView中的setOnScrollListener()监听,当然也就没有SCROL ...

  4. 基于html5海贼王单页视差滚动特效

    分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="top"> < ...

  5. singer页左侧滚动的时候右侧跟随高亮显示

    1.封装scroll.vue的listenScroll属性和方法,用来确定监听listview.vue的滚动事件 2.将listview.vue的listenScroll属性默认设置为true; 3. ...

  6. iOS:判断引导页首次出现、版本更新

    判断引导页首次出现方式: //选择根控制器 +(void)chooseRootViewController{ //初始化Window窗口 [AppDelegate Delegate].window = ...

  7. javascript实现双击网页自动滚动，单击滚动停止

    当网页中有长篇文章时,浏览起来就比较吃劲了,想想一边忙着拖动滚动条,一边忙着浏览,确实挺累人的.为了客人能够轻松的浏览,我们可以使用script代码实现网页的自动滚屏,当双击网页的时候,网页将会自动向 ...

  8. js实现相册翻页，滚动，切换，轮播功能

    我们在做web开发的时候,前台的效果要求是很高的,因为对于不懂程序的用户来说,前台的视觉冲击,无疑是对我们产品的第一印象. 在完成web图片各种功能上,很多框架有很绚丽的效果,但今天我们来看看用原生的 ...

  9. IOS UIScrollView + UIButton 实现segemet页面和顶部标签页水平滚动效果

    很长一段时间没有写博客了,最近在学习iOS开发,看了不少的代码,自己用UIScrollView和UIButton实现了水平滚动的效果,有点类似于今日头条的主界面框架,效果如下: 代码如下: MyScr ...

随机推荐

  1. 行列有序矩阵求第k大元素

    问题来源:http://www.careercup.com/question?id=6335704 问题描述: Given a N*N Matrix. All rows are sorted, and ...

  2. LCIS 最长公共上升子序列

    这个博客好久没写了,这几天为了准备清华交叉研究院的夏令营,在复习大一大二ACM训练时的一些基础算法,正好碰到LICS,发现没有写在博客里,那就顺便记录一下好了. 参考链接:http://blog.cs ...

  3. git的安装使用和代码自动部署

    1.安装 http://www.cnblogs.com/sunada2005/archive/2013/06/06/3121098.html http://www.cnblogs.com/zhcncn ...

  4. 高质量图形库：pixellib

    点这里 pixellib 是高质量 2D 图形库: 高质量抗锯齿,矢量图形绘制 多种图像格式: RGB, BGR, ARGB, ABGR, RGBA, BGRA 8 / 15 / 16 / 24 / ...

  5. iframe父子兄弟之间调用传值(contentWindow && parent)

    iframe的调用包括以下几个方面:(调用包含html dom,js全局变量,js方法) 主页面调用iframe: iframe页面调用主页面: 主页面的包含的iframe之间相互调用: 主要知识点 ...

  6. 深入剖析阿里巴巴云梯YARN集群

    我的一篇文章<深入剖析阿里巴巴云梯YARN集群> 已经发表在程序员2013年11月刊中, 原文链接为http://www.csdn.net/article/2013-12-04/28177 ...

  7. Android核心分析之二十六Android GDI之SurfaceFlinger

    Android GDI之SurfaceFlinger SurfaceFinger按英文翻译过来就是Surface投递者.SufaceFlinger的构成并不是太复杂,复杂的是他的客户端建构.Sufac ...

  8. stringbuffer与stringbuilder的区别?

    1. 在执行速度方面的比较:StringBuilder > StringBuffer 2. StringBuffer与StringBuilder,他们是字符串变量,是可改变的对象,每当我们用它们 ...

  9. awk过滤统计不重复的行

    awk以‘\t’为分隔符区分列 cat logs | grep IconsendRedirect | grep 1752 | awk -F'\t' '{print $8}'| wc -l awk过滤统 ...

  10. C#枚举硬件设备（升级版）

    原文:C#枚举硬件设备(升级版) 先取设备类型: ; } }