原文链接：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. Sqli-labs less 32

    Less-32 利用上述的原理,我们可以进行尝试payload为: http://127.0.0.1/sqli-labs/Less-32/?id=-1%df%27union%20select%201, ...

  2. Win8必知快捷键汇总

    * Win+C:调出应用Charm菜单(开始界面.传统桌面) * Win+D:所有程序最小化,再次按下恢复(开始界面.传统桌面) * Win+E:打开我的电脑(开始界面.传统桌面) * Win+F:调 ...

  3. linux gcc loudong

    五事九思 (大连Linux主机维护) 大连linux维护qq群:287800525 首页 日志 相册 音乐 收藏 博友 关于我     日志       spcark_0.0.3_i386.src.t ...

  4. D&F学数据结构系列——二叉排序树

    二叉排序树(Binary Sort Tree) 定义:对于树中的每个结点X,它的左子树中所有关键字值小于X的关键字值,而它的右子树中所有关键字值大于X的关键字值. 二叉查找树声明: #ifndef _ ...

  5. sqoop导入hdfs上的数据到oracle

    /opt/sqoop-/bin/sqoop export --table mytablename --connect jdbc:oracle:thin:@**.**.**.**:***:dbasena ...

  6. [读]剑指offer

    研二的开始找工作了,首先祝愿他们都能够找到自己满意的工作.看着他们的身影,自问明年自己这个时候是否可以从容面对呢?心虚不已,赶紧从老严那儿讨来一本<剑指offer>.在此顺便将自己做题所想 ...

  7. 借助flexpaper实现word在线预览和打印

    为了实现word能够在web上尽量以原始的排版样式展现出来,选择基于activex控件的方式太过于依赖某种浏览器,并且存在可能需要花费金钱购买相应的控件产品:于是借助flexpaper这种flash展 ...

  8. android学习--radiogroup学习

    这个阶段在学习android的相关基本UI现将相关练习的代码粘贴在此便于后期学习之用(radio控件) 效果图:   main_layout.xml <?xml version="1. ...

  9. python_pycharm介绍1

    1. 常用设置 修改编程风格 File-Setting中,Editor下Colors&Fonts修改即可调整风格. 修改字体大小 pycharm默认字体太小,需调整些,Settings--&g ...

  10. Struts2笔记——result结果类型

    result > 每个 action方法都将返回一个 String 类型的值,Struts 将根据这个值来决定响应什么结果. > 每个 Action声明都必须包含有数量足够多的 resul ...