JS判断滚动条是不是停止滚动
日期：2014-05-16 浏览次数：20518 次
JS判断滚动条是否停止滚动
背景：昨天一个同事有种需求，有一个展示数据区域的div，带滚动条，当滚动条滚动时，需要向后台发请求，计算数据，再拿到前台展示。
分析：由于数据量级别较大，所以当滚动条滚动时，如果时时向后台发请求，对服务器和浏览器都造成巨大的压力。想到的解决方案是，当滚动条停止时，再去发请求计算数据。那么问题来了，如何判断滚动条是否停止了呢？
解决：搜索了一下，js本身是无法判断滚动条是在滚动状态还是停止状态，只有通过其它方式了。后来想到的思路是当滚动条滚动的时候，发起一个定期执行的方法，并记录一次当前滚动条到顶部的距离，这个方法中判断此时滚动条到顶部的距离是否和上次记录的相等，如果相等，那么说明停止滚动了，不相等，还在滚动。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> New Document </title>
<script type="text/javascript">
<!--
// 让浏览器出现滚动条
for(var i = 0; i < 100; i++) {
document.write("<br/>");
}
var topValue = 0,// 上次滚动条到顶部的距离
interval = null;// 定时器
document.onscroll = function() {
if(interval == null)// 未发起时，启动定时器，1秒1执行
interval = setInterval("test()", 1000);
topValue = document.documentElement.scrollTop;
}
function test() {
// 判断此刻到顶部的距离是否和1秒前的距离相等
if(document.documentElement.scrollTop == topValue) {
alert("scroll bar is stopping!");
clearInterval(interval);
interval = null;
}
}
//-->
</script>
</head>
<body>
</body>
</html>
可以设置定时执行的时间，时间越短，响应的越及时，浏览器压力越大；时间越长，响应的越慢，浏览器压力越小。
你还有更好的方式吗？求教
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
