首页
学习
活动
专区
工具
TVP
发布

JS判断滚动条是否停止滚动

背景:昨天一个同事有种需求,有一个展示数据区域div,带滚动条,当滚动条滚动时,需要向后台发请求,计算数据,再拿到前台展示。        ...分析:由于数据量级别较大,所以当滚动条滚动时,如果时时向后台发请求,对服务器和浏览器都造成巨大压力。想到解决方案是,当滚动条停止时,再去发请求计算数据。...那么问题来了,如何判断滚动条是否停止了呢?        解决:搜索了一下,js本身是无法判断滚动条是在滚动状态还是停止状态,只有通过其它方式了。...后来想到思路是当滚动条滚动时候,发起一个定期执行方法,并记录一次当前滚动条到顶部距离,这个方法中判断此时滚动条到顶部距离是否和上次记录相等,如果相等,那么说明停止滚动了,不相等,还在滚动。...setInterval("test()", 1000); topValue = document.documentElement.scrollTop; } function test() { // 判断此刻到顶部距离是否和

17.2K00
您找到你想要的搜索结果了吗?
是的
没有找到

通过 JS 判断页面是否有滚动条简单方法

前言 最近在写插件过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁。最终通过参考不同方法,写了一个比较简单方法。...在判断滚动条同时也需要计算滚动条宽度,通过本篇文章一并与大家分享。 为什么要判断滚动条 ?...判断滚动条需求在弹窗插件中用较多,因为弹窗大多会添加 overflow: hidden 属性,如果页面比较长的话,添加这个属性之后页面会有晃动。...为了增强用户体验,通过判断是否有滚动条而添加 margin-left 属性以抵消 overflow: hidden 之后滚动条位置。...判断是否有滚动条方法 其实只需要一行 JS 就可以,测试兼容 IE7 function hasScrollbar() { return document.body.scrollHeight >

8K90

利用本地存储,记录滚动条位置

在一定时间范围内,用手机微信打开之前浏览过订阅号文章,文章显示出来是你上次阅读到位置,而不是从头开始显示。手机微信是怎么知道你文章阅读位置?前端工程师能否实现该功能?...分析: 1、监听页面滚动条状态(是否滚动) 2、滚动时获取页面滚动条位置 3、滚动条位置保存到本地存储里面 4、页面每次加载时候获取本地存储里面的值 5、获取到值来设置页面滚动条位置 3、知识要点...2、滚动时获取页面滚动条位置 代码中解决了获取滚动条位置兼容问题。...先判断本地存储里面是否有记录过页面滚动条值,如果有则获取本地存储值,否则不进行操作。...'); } 5、获取到值来设置页面滚动条位置 跟获取滚动条位置一样处理了浏览器兼容问题。

2.6K70

滚动条颜色_Java滚动条里面怎么添加控件

大家好,又见面了,我是你们朋友全栈君。 对里面样式介绍: 语法: scrollbar-face-color :color 参数: color : 指定颜色。...说明: 设置或检索滚动条3D表面(ThreedFace)颜色。(演示) 语法: scrollbar-highlight-color :color 参数: color : 指定颜色。...说明: 设置或检索滚动条方向箭头颜色。当滚动条出现但不可用时,此属性失效。(演示) 语法: scrollbar-shadow-color :color 参数: color : 指定颜色。...说明: 设置或检索滚动条亮边框颜色。 语法: scrollbar-base-color :color 参数: color : 指定颜色。 说明: 设置或检索滚动条基准颜色。...如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

81120

js -【 数组】怎么判断一个变量是数组类型

怎么判断一个数组是数组呢? 其实这个也是一个常考题目。依稀记得我为数不多面试经过中都被问道过。...此方法返回一个布尔值,能够精确判断一个对象类型。 ? ? ?...看上图就知道了,Array就是变量m原型。所以用这个方法就能判断出来。 对比一个类型为“纯”Object变量打印出来信息: ? 就更加一目了然为什么用这个方法就可以判断出来了吧!...然后用方案二原理差不多,我们查找字符串中Array关键字位置是否等于-1。即能得出变量是否为数组类型得了。 ?...方案五:数组方法 isArray() Array.isArray(variable); 思路: js一个方法,专门用来测试对象是否是Array类型 ?

6.4K30

js 判断数组是否包含某个元素方法集合原因_怎么判断数组有几个元素

1、JavaScript indexOf() 方法 定义和用法 indexOf() 方法可返回某个指定字符串值在字符串中首次出现位置。...规定需检索字符串值。 fromindex 可选整数参数。规定在字符串中开始检索位置。它合法取值是 0 到 stringObject.length – 1。...开始检索位置在字符串 fromindex 处或字符串开头(没有指定 fromindex 时)。如果找到一个 searchvalue,则返回 searchvalue 第一次出现位置。...stringObject 中字符位置是从 0 开始。 提示和注释 注释:indexOf() 方法对大小写敏感! 注释:如果要检索字符串值没有出现,则该方法返回 -1。...Number类型 指定从数组指定索引位置开始查找,默认为 0 3、JavaScript find() 方法 定义和用法 find() 方法返回通过测试(函数内判断数组第一个元素值。

6.2K60

知识点:回到顶部(减速)、滚动禁用和启用、判断滚动条位置显示某元素、使用jQuery判断字符串是不是json格式

回到顶部(减速)、滚动禁用和启用、判断滚动条位置显示某元素、使用jQuery判断字符串是不是json格式 一、回到顶部 方法: 1....启用:绑定时候如果使用是匿名函数,则需要将该函数重写一次。如果不是匿名函数的话直接执行该函数。...三、鼠标滚动到指定位置才显示某元素 $(window).scroll(function() { var scrollTop = $(this).scrollTop();...slideDown(); } else { $('#myTab').slideUp(); } }); 其中scrollTop表示该元素距离顶部距离...四、使用jQuery判断字符串是不是json格式 isJSON: function(str) { if (typeof str == 'string') {

1.1K10
领券