原文链接：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. Chapter 5

    1. 2模块导入 3.包导入

  2. ZOJ2928 Mathematical contest in modeling(模拟退火)

    连续两天学了一些numerical analysis的方法,昨天是学了一下三分,今天学了一下模拟退火.很早就听说了模拟退火在求费马点上的运用了,只知道一些大概,但是没有深入研究,碰到题目就卡壳了,现在 ...

  3. DevExpress licenses.licx 问题

    在DevExpress ( 当然并不范指DevExpress,很多收费软件都是这样的)中,licenses.licx 是用户许可证书文件,当我们使用某些ActiveX(是Microsoft对于一系列策 ...

  4. Dev 统计GridControl界面上当前选中的一行的值

    private void gridView1_CellValueChanged(object sender, DevExpress.XtraGrid.Views.Base.CellValueChang ...

  5. 深入理解javascript:揭秘命名函数表达式

    这是一篇转自汤姆大叔的文章:http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 前言 网上还没用发现有人对命名函数表达式进去重复深 ...

  6. struts2实现选择i18n语言选择切换

    [新手学习记录,仅供参考!] 1.项目准备 首先当然是我们得创建一个struts2的web项目,并且已经实现了一个简单的功能. 以下通过登录功能来举例说明. 2.指定全局国际化资源文件 在struts ...

  7. 李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView

    李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView (VTmagic是一个实现左右滚动的控制器的框架,也可以实现此功能) 实现的效果:  01 - 创建四个控制器 02 - 定义需要 ...

  8. Android核心分析之十七电话系统之rilD

    Android电话系统之-rild Rild是Init进程启动的一个本地服务,这个本地服务并没有使用Binder之类的通讯手段,而是采用了socket通讯这种方式.RIL(Radio Interfac ...

  9. VC高手们的博客

    http://www.cnblogs.com/killmyday/tag/Debug/ (关于符号调试等内容比较多)

  10. Android笔记——导入Github开源项目CircleRefreshLayout

    百度n久都找不到android studio导入第三方类库的正确方法,纠结睡不着 ,最后终于蒙到了方法,原来想太多了  ---------------------------------------- ...