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 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(五)Vue的动画

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

603
来自专栏我和未来有约会

Silverlight性能优化

Silverlight性能优化 性能优化 监视性能(FPS) Silverlight的呈现性能会因指定的宿主参数和内容的复杂程度而异。 为了监视FPS的值我们...

1687
来自专栏郭诗雅的专栏

玩转flex布局

H5页面如果使用了flex,就会发现处处离不开它,因为实在太多优点了!

36819
来自专栏潇涧技术专栏

Art of Android Development Reading Notes 7

《Android开发艺术探索》读书笔记 (7) 第7章 Android动画深入分析

713
来自专栏互联网杂技

前端兼容性问题总结

css兼容性问题 1、标签,不加样式控制的情况下,各自的margin 和padding差异较大。 解决方案:css里 *{margin:0;pad...

3285
来自专栏非典型技术宅

iOS动画系列之九:实现点赞的动画及播放起伏指示器(OC+Swift)1. CAReplicatorLayer2. CAEmitterLayer3. CAGradientLayer

1062
来自专栏iOS开发攻城狮的集散地

iOS 瀑布流之栅格布局

681
来自专栏前端架构

小议前端在360极速官网的创新运用

话说离上次官网改版有段时间了,里面的一些CSS3的运用我想看过上篇文章也有所了解。本文再谈谈此次改版中HMTL5、CSS3运用和性能优化等一些总结。还望大家别取...

682
来自专栏挖坑填坑

Angular练习之animations动画二

引入动画模块>创建动画对象>在动画载体上使用。我觉得其核心的内容在创建动画对象上,今天我们就来练习创建不同的动画对象trigger

632
来自专栏一个爱瞎折腾的程序猿

js实用方法记录-指不定哪天就会用到的js方法

331

扫码关注云+社区