专栏首页高爽的专栏JS判断滚动条是否停止滚动

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>

       可以设置定时执行的时间,时间越短,响应的越及时,浏览器压力越大;时间越长,响应的越慢,浏览器压力越小。

       你还有更好的方式吗?求教

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Comparison method violates its general contract!

    背景 16号为了统一线上服务器运行环境,将两台服务器的Tomcat6+JDK6升级到Tomcat7+JDK7,本以为很简单的事情,升级后自己验证也没问题,没想到...

    高爽
  • Notepad++列编辑、正则查找、替换

      目标:        将源数据转成初始化sql语句。 源数据: 104110040018,1,中国银行,中国银行天津琼州道支行,NULL,1100,天津市...

    高爽
  • Java序列化(一)

     Java序列化,一个日常开发中比较少用到的技术。正常情况下,JVM启动后,我们可以创建对象生存其内,JVM关闭后,我们创建过的对象都随之销毁,资源释...

    高爽
  • 随心所欲的滚动条,远离产品汪(一)

    在我们的开发生活中,相信很多人都会遇到形形色色的项目需求,比如更改浏览器的默认样式,在产品定下需求后给的网页设计图中我们最常遇到的是自定义滚动条的样式,或者当你...

    HTML5学堂
  • 微信小程序scroll-view隐藏滚动条

    更多关于滚动条的设置参看:CSS3自定义滚动条样式 -webkit-scrollbar

    渔父歌
  • 通过 JS 判断页面是否有滚动条的简单方法

    前言 最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁。最终通过参考不同方法,写了一个比较简单的方...

    叙帝利
  • iframe 滚动条

    在调用框架或者多级 iframe 的时候,经常会出现多个滚动条或者左右都有的情况,需要我们进行调整,现就设置方法记录如下。

    zucchiniy
  • 打造属于你自己的乐高积木

    夫鹄不日浴而白,乌不日黔而黑 -- 庄周 上面的这句话某种程度来说是不妥的,人性(这也是全体生物进化出的本能)趋利避害,如果不施加外力,很容易走向消极的一面。...

    tyrchen
  • 王石的创业和资本论

    用户1756920
  • 为了让大家能够看到K8S Dashboard DEMO,我创建了一个“只读用户”

    这两天抽空搞了下Kubernetes集群和Traefik,有很多朋友私信我想要看看实际的Kubernetes集群 Dashboard Demo效果,所以简单的把...

    云爬虫技术研究笔记

扫码关注云+社区

领取腾讯云代金券