[转] 判断html页是否滚动停止

最新推荐文章于 2021-06-08 18:24:31 发布
最新推荐文章于 2021-06-08 18:24:31 发布
阅读量110 收藏
点赞数
原文链接：http://www.cnblogs.com/chutianshu1981/p/3614227.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

weixin_30596023
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5 判断滑动停止,html5触摸事件判断滑动方向的实现
weixin_29798625的博客
06-18 379
这篇文章主要介绍了html5触摸事件判断滑动方向的实现的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。为了给触摸界面提供有力支持, 触摸事件提供了响应用户对触摸屏或者触摸板上操作的能力.接口TouchEventTouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。每 个...
原生js判断手机端页面滚动停止
易函123
02-22 873
var topValue = 0,// 上次滚动条到顶部的距离 interval = null;// 定时器 contactsList = document.getElementById(&quot;contactsList&quot;); contactsList.onscroll = function() { //我项目中的contactsList滚动 ...
如何判断html页面停止滚动？
weixin_30383279的博客
03-07 333
写在开始的话 查遍的文献，没有找到js或者jquery定义好的方法可用，最后迫不得已自己写了个方法。（如果哪位同学知道有其他方法，欢迎讨论） 代码 var count_index = 0; $(window).scroll( function(e) { if(count_in...
JS判断滚动条是否停止滚动
weixin_30872733的博客
12-03 90
<!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>...
html判断滚动条是否到达底部
I need you back to stay
07-04 4942
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> Insert title here /** * 判断滚动条是否到最底端的方法 * @param Element obj */ function isScro
JS滚动列表加载
12-01
pageNum：每页加载数量，将会根据这个数量判断是否全部加载完成； getNew：自定义获取数据方法； funcArg：自定义获取数据时传递的参数，类型为函数，返回所需参数； childrenTag：列表子项的标签，默认LI； func：...
基于ApacheNutch和Htmlunit的扩展实现AJAX页面爬虫抓取解析插件nutch-htmlunit.zip
07-19
基于页面滚动的AJAX请求页面抓取: 诸如淘宝/天猫的商品详情页面会基于页面滚动发起商品描述信息的加载， 通过protocol-htmlunit扩展处理可以实现此类页面数据抓取。 运行体验 由于Nutch运行是基于Unix...
超实用的jQuery代码段
03-04
2.3 判断HTML元素是否嵌套 2.4 获取当前元素的索引值 2.5 插入节点元素 2.6 复制节点元素 2.7 替换节点元素 2.8 删除节点元素 2.9 为元素绑定事件 2.10 如何从元素中除去HTML标签 2.11 如何限制文本域中字符的个数 ...
IBM WebSphere Portal门户开发笔记01
03-11
7、判断用户是否登录标签 46 8、portal登录注销再登录只出现一张图片 46 9、登录失败及修改提示信息 46 10、设置超时跳转页面 47 11、 输出登录用户名称 47 12、输出注销 48 13 、动态链接 48 六、使用WCM时，会遇到...
UIWebView的使用代码
12-15
此外，该方法规定执行的脚本时长限定在10s内，为的是防止过长时间的阻塞页面主线程，超过执行时间上线会自动停止脚本运行，并且脚本可分配内存限定在10MB内，超过分配上线将会引发异常。 javascript调用native代码 ...
html判断是否有滚动条,JS 判断元素是否可以滚动
weixin_30396777的博客
06-08 1539
今天在解决 ios 移动端滚动穿透的问题时遇到一个问题，就是判断元素能否滚动，把这个过程记录下来。以下以纵向滚动为例，横向滚动同理。嫌麻烦的可以直接查看代码。基础概念Element.scrollHeightscrollHeight 是一个元素内容高度的度量，包括由于溢出导致的视图中不可见的内容，scrollHeight 的值等于元素在不能出现滚动条的时候展示出视图中所有内容所需要的最小高度。如果元...
麦肯锡 组织 概述与基本框架gl.ppt
05-05
麦肯锡 组织 概述与基本框架gl.ppt
node-v10.11.0-linux-s390x.tar.xz
最新发布
05-05
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
大型强子对撞机电源转换器设计与运行挑战
05-05
大型强子对撞机电源转换器设计与运行挑战
(优作)低功耗STM32F411开发板（原理图+PCB源文件+官方例程+驱动等）
05-05
本文档提供了一套完整的STM32F411低功耗开发板资源，包含详细的原理图、PCB设计源文件、官方提供的示例程序以及必要的驱动程序。这些资料对于嵌入式系统开发者来说是宝贵的学习资源，特别适合那些希望深入了解STM32F411微控制器及其应用的学生、工程师和电子爱好者。文档旨在帮助用户快速上手STM32F411的开发工作，无论是进行学术研究、产品原型设计还是个人项目实践，都能从中获益。 关键词标签： STM32F411 低功耗 开发板 资料下载
html 上下滚动鼠标 左右标签页跟随
06-09
这个问题涉及到两个方面：HTML页面的滚动和标签页的切换跟随。我会分别回答这两个问题。 1. HTML页面的滚动跟随鼠标滚轮 要实现HTML页面的滚动跟随鼠标滚轮，可以通过JavaScript来监听鼠标滚轮事件，并且根据滚轮...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值