zoukankan      html  css  js  c++  java

  • [转] 判断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>

    以上可以更改定时判断的时间，时间越短，相应的越及时，用户体验效果越好，但相应的客户端浏览器的压力会越大。
  • 相关阅读:
    android数据恢复
    UVA 690 Pipeline Scheduling
    2017 国庆湖南 Day4
    2017 国庆湖南 Day5
    2017 国庆湖南 Day6
    2017国庆 清北学堂 北京综合强化班 Day1
    2017 国庆湖南Day2
    bzoj 2962 序列操作
    UVA 818 Cutting Chains
    UVA 211 The Domino Effect
  • 原文地址：https://www.cnblogs.com/chutianshu1981/p/3614227.html
Copyright © 2011-2022 走看看