我是靠谱客的博主 虚幻乌冬面,最近开发中收集的这篇文章主要介绍[转] 判断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>

以上可以更改定时判断的时间,时间越短,相应的越及时,用户体验效果越好,但相应的客户端浏览器的压力会越大。

转载于:https://www.cnblogs.com/chutianshu1981/p/3614227.html

最后

以上就是虚幻乌冬面为你收集整理的[转] 判断html页是否滚动停止的全部内容,希望文章能够帮你解决[转] 判断html页是否滚动停止所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(44)

评论列表共有 0 条评论

立即
投稿
返回
顶部