原文链接：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. MFC单文档程序结构

    MFC单文档程序结构三方面: Doc MainFrame View

  2. Delphi中@,^,#,$特殊符号意义

    概述:   ^: 指针   @: 取址   #: 十进制符   $: 十六进制符   @:取址运算符; var   int:integer;   p:^integer; begin   new(P); ...

  3. （转）单机上配置hadoop

    哈哈,几天连续收到百度两次电话,均是利好消息,于是乎不知不觉的自己的工作效率也提高了,几天折腾了好久终于在单机上配置好了hadoop,然后也成功的运行了一个用例,耶耶耶耶耶耶. 转自:http://w ...

  4. MYSQL 遭遇 THE TOTAL NUMBER OF LOCKS EXCEEDS THE LOCK TABLE SIZE

    今天进行MySql 一个表数据的清理,经过漫长等待后出现 The total number of locks exceeds the lock table size 提示.以为是table_cache ...

  5. cocos2d-x3.0环境搭建（基于win7以及mac）

    流程概览: Windows平台 一.安装 Python与配置Python环境变量 二.安装Cocos2d-x,并创建项目 Mac平台 安装Cocos2d-x,并创建项目 具体操作: 一.安装Pytho ...

  6. Java：内部类(静态内部类、成员内部类、局部内部类、匿名内部类)

    Java基础_内部类:在Java中,可以将一个类定义在另一个类里面或者一个方法里面,这样的类称为内部类. 内部类的主要作用:使用内部类可以减少命名冲突. 定义位置:一个内部类可以定义在一个类中,也可以 ...

  7. [c/c++]指针数组 pk 数组指针

    首先强调 指针数组归根结底是个数组:数组指针归根结底是个指针. 数组指针 以int (*int)[10]为例 ()的优先级大于[],因此首先它是一个指针,它指向一个数组,数组的维数是10.因此数组指针 ...

  8. Spring Security资料

    Spring Security学习总结一 Spring Security3.1登陆验证 Spring security初探

  9. SPOJ 1811 Longest Common Substring 后缀自动机

    模板来源:http://www.neroysq.com/?p=76 思路:http://blog.sina.com.cn/s/blog_7812e98601012dfv.html 题意就是求两个字符串 ...

  10. ftrace的使用【转】

    转自:http://blog.csdn.net/cybertan/article/details/8258394 This article explains how to set up ftrace ...