• [转] 判断html页是否滚动停止

    原文链接：http://www.phpernote.com/javascript-function/754.html

    最近有个项目中遇到这样一个问题：

    有一个用于展示数据的带滚动条的DIV块，业务需求是当滚动条滚动时，将数据库中的数据读出并展示出来。这个本身问题不大，但实际中却发现存在这样一个问题，即当数据量比较大的时候，当滚动条滚动时，会不停的向后台发出数据请求，这个在访问量达到一定规模的时候，对服务器和浏览器都造成了巨大的压力。

    为了解决这个问题，作者想到一个办法是当滚动条停止时，才向服务器发送请求数据。但是碰到个问题就是如何判断滚动条是否停止了呢？经过几番研究终于解决了，在这里作者和大家分享一下如何通过js判断浏览器滚动条是否停止滚动（这里的效果是兼容IE和火狐浏览器）。

     1 <html xmlns="http://www.phpernote.com/javascript-function/194.html">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <title>JS判断滚动条是否停止滚动示例</title>
 5 <script type="text/javascript">
 6 var topValue=0,// 上次滚动条到顶部的距离
 7 interval=null;// 定时器
 8 window.onscroll=function(){
 9     if(interval==null)
10     interval=setInterval("test()",1000);//这里就是判定时间，当前是1秒一判定
11     topValue=document.documentElement.scrollTop;
12 }
13 
14 function test(){
15     // 判断此刻到顶部的距离是否和1秒前的距离相等
16     if(document.documentElement.scrollTop==topValue){
17         alert("滚动条停止滚动了!");
18         clearInterval(interval);
19         interval=null;
20     }
21 }
22 </script>
23 </head>
24 <body>
25 <div style="height:2000px;">http://www.phpernote.com/jquery/251.html</div>
26 </body>
27 </html>

    以上可以更改定时判断的时间，时间越短，相应的越及时，用户体验效果越好，但相应的客户端浏览器的压力会越大。
  • 相关阅读:
    开发环境搭建
    添加约束设置方式
    ubuntu和windows双系统启动顺序的修改
    函数指针，指针函数，数组指针，指针数组 区分
    boost
    centos7 64位如何配置网络
    MySQL数据库（主键、索引、外键、触发器...）
    几种常见字符集与字符编码
    ODBC、OLEDB应用详解
    C#事件以及EventHandler、EventArgs
  • 原文地址：https://www.cnblogs.com/chutianshu1981/p/3614227.html
Copyright © 2020-2023  润新知