原文链接：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. 3[doses] ------一种诡异的写法

    在 head first c 的第60页,有这么一道题: 一个富翁因为服药过度而死亡. 下面是自动服药器的代码: #include <stdio.h> int main(void) { , ...

  2. 线性时间常数空间找到数组中数目超过n/5的所有元素

    问题描述: Design an algorithm that, given a list of n elements in an array, finds all the elements that ...

  3. iOS-JS交互 (WebViewJavascriptBridge)

    , , , );     messageButton.titleLabel.font = font;     messageButton.backgroundColor = [UIColor colo ...

  4. 机器学习之多变量线性回归（Linear Regression with multiple variables）

    1. Multiple features(多维特征) 在机器学习之单变量线性回归(Linear Regression with One Variable)我们提到过的线性回归中,我们只有一个单一特征量 ...

  5. lintcode: 最长连续序列

    最长连续序列 给定一个未排序的整数数组,找出最长连续序列的长度. 说明 要求你的算法复杂度为O(n) 样例 给出数组[100, 4, 200, 1, 3, 2],这个最长的连续序列是 [1, 2, 3 ...

  6. Linux基础--文件与目录管理

    1.目录与路径 1)特殊目录 .   代表此层目录 ..  代表上一层目录 -   代表前一个工作目录 ~   代表『目前使用者身份』所在的家目录 ~account   代表account这个使用者的 ...

  7. Spring整合JUnit4测试

    @RunWith(SpringJUnit4ClassRunner.class) @ContextConfiguration(locations = {"classpath:spring/ap ...

  8. iOS:Git分布式版本控制器系统

    Git的使用 1.Git简介: Git是一个开源的分布式版本控制系统.与SVN.CVS相比 分布式    不需要中心仓库 Git的版本号都是生成的一个哈希值,比如:bbaf6fb5060b4875b1 ...

  9. python流程控制语句 ifelse - 4

    嵌套 #! /usr/bin/python a = int(input ("请输入一个整数:")) : : print ("无法显示") else : prin ...

  10. 【Tech】Ganglia安装配置

    基础配置: Hadoop 2.2.0,Hbase 0.96. 四台集群机器,一台master,三台slave. 三台slave上分别装gmond:namenode机器上设置datasource. 客户 ...