首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

17.3K00

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

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

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

JS滑动滚动n种方式

JS滑动滚动n种方式 # 阅读本文,你将: 了解原生JS实现页面滚动多种方式 了解这多种方式可以对应上效果以及推荐应用场景 多个滑动方面的坑以及相应(如果有)解决方案 获得一些有用函数...值: 如果为true,元素顶端将和其所在滚动可视区域顶端对齐。...区别是设置behavior为'smooth'后会平滑滚动 3.2 使用说明 如果场景要求我们滚动页面到某个元素位置,此时可以使用window.scrollTo(); 如果场景要求我们滚动到某个可滚动父元素位置...该api仅FireFox支持 6.1 基本用法 表示相对当前滚动位置再滚动指定行数距离,行为表现接近于上下键控制滚动 例如window.scrollByLines(-5)表示向上滚动5行 7 window.scrollByPages..."你屏幕设置": `${window.screen.deviceXDPI} 像素/英寸`, }); console.table(getHWInfo()); 4 判断元素是否可以滚动 function

6.1K10

小程序 - swiper除了左右切换还有上下滚动超出屏幕内容

本来呢,我是有专门整理小程序恶心bug文章,每次只要添加汇总就好, 但是呢,鉴于这个问题恶心程度,所以我把他单独拿出来说了。...但是,好景又不长,测试阶段上线倒数第二天,提出了个bug,有的用户会传超出屏幕长度图片,需求是不影响正常左右切换情况下,要让图片能够上下滑动显示完整。 我天。。。...swiper和swiper-item会被默认加上100%高度,所以想要实现overflow-y:scroll是不可能额, 想想小程序纵向滚动就只有scroll-view可以实现,我把scroll-view...包住swiper不行, 毕竟每一个swiper-item都是独立,有的长有的短,包一个是达不到要求,就算能滚动, 但是别忘了前边说:swiper和swiper-item会被默认加上100%高度,...今天早上来了突然开窍了,把每一个swiper-item里边包一个scroll-view,再加上feed流中实现短图片垂直居中,长图片从上向下滚动样式,最后效果就出来了: ? ? ? ?

2.7K70

js - 移动端超出滚动功能,附带滚动条,可解决弹层中滚动穿透问题。

背景: 弹层里边有可滚动区域时,在移动端坑我就不多说了。 找了很多解决滚动穿透方案,最终都不能完美解决。 一气之下自己js撸了一个。 效果图: ?...原理: 1、解决滚动穿透:通过给弹层绑定touchmove和mousewheel事件,取消默认行为实现。...2、取消默认行为后不能滚动:给需要滚动展示区域绑定touchstart、touchmove和mousewheel事件,监听触发区域Y值,对应修改可滚动区域translateY值,实现滚动效果。...} 47 $(this).css('transform', `translate(0px, ${transY}px)`); 48 /* 移动时,滚轮变化监听...let y = e.originalEvent.deltaY; 70 if (y > 0) { 71 /* 向下翻滚轮 wheelDeltaY值与之相反

7.2K10

JS 中 this上下文对象使用方式

JavaScript 有一套完全不同于其它语言对 this 处理机制。 在五种不同情况下 ,this 指向各不相同。...还有几个常见情况,根据谁调用方法就指向谁原则,this指向要细看 // 全局 name var name = 'name1'; var obj = { name: 'name2',...其实就类似上头提到 obj.sayName()  obj.name 等 这时this会指向这个obj 四、call/apply/bind 调用 当使用 Function.prototype 上 ...call 或者 apply ,bind 方法时,函数内 this将会被 显式设置为函数调用第一个参数。...可以看到,如果函数倾向于和 new 关键词一块使用,则我们称这个函数为构造函数,当new 了之后,this则指向这个心创建对象(这个new 过程其实也涉及到了继承机制)。

1.8K10

Java selenuim用执行js模拟鼠标滚动方式

题目: Java selenuim用执行js模拟鼠标滚动方式完成页面滚动异步加载及Java接收浏览器js返回值 在使用selenuim webdriver爬取网页时,经常会有很多网页并不是访问链接就会加载全部内容...,而是需要鼠标向下滚动,动态加载内容,比如知乎首页。...这样在爬取过程中并不能直接抓数据,需要先模拟鼠标滚动,让页面先加载出来才行。 ---- 我使用方法是利用如下js代码来完成页面的滚动,每次滚动多少可以根据不同情况自行调整。...对于部分网页来说,是不会允许无限制加载新数据,换句话说就是滚动加载出数据是有一定限制。那么如何使页面滚动到恰好加载到没新数据可加载 就是一个新问题了。...接下来问题就是如何使Java代码能够接收到浏览器执行js代码返回值问题了。很简单,在js代码上加上return 即可。注意有一个空格。

4.4K20

js判断属性是否存在(javascript特点)

该方法可以判断对象自有属性和继承来属性是否存在。...如果要判断数组中是否存在某个元素的话很好判断,直接用数组indexOf方法就好,存在返回当前索引不存在返回-1 var arr=[1,2,3,4] arr.indexOf(3) // 2 arr.indexOf...要只是判断的话是可以遍历后判断对象属性是否相同,像这种: arr.forEach(item=>{ if(item.name=='Alex'){ alert('存在这个元素')...但实际中往往是需要动态添加或删除对象或元素,用这个方法的话不好操作,可能会添加或删除掉多个,可以是用stringindexOf方法来判断 const option = {name:'111'} //...} 这个判断是可以,但存在一个问题需要注意一下,如果对象顺序不一样,是不能检测到重复 例如arr = [{name:’张三’, sex:’男’}] option = {sex:’男’, name

6K30
领券