首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

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

2、功能分析 这个功能的实现并不是很难,当页面滚动时记录页面滚动条位置并保存到本地存储里面,当你再次打开页面的时候读取本地存储里面的值来设置页面滚动条位置。具体我们来分析一下。...分析: 1、监听页面滚动条的状态(是否滚动) 2、滚动时获取页面滚动条位置 3、滚动条位置保存到本地存储里面 4、页面每次加载的时候获取本地存储里面的值 5、获取到的值来设置页面滚动条位置 3、知识要点...2、滚动时获取页面滚动条位置 代码中解决了获取滚动条位置的兼容问题。...'); } 5、获取到的值来设置页面滚动条位置 跟获取滚动条位置一样处理了浏览器兼容问题。...5、总结 利用本地存储,记录滚动条位置,主要涉及了两个主要技术点,一个点是滚动条的操作,另外一个点是本地存储的操作。

2.6K70

css滚动条样式修改_js设置滚动条样式

CSS滚动条选择器 ::-webkit-scrollbar — 整个滚动条 ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头) ::-webkit-scrollbar-thumb...— 滚动条上的滚动滑块 ::-webkit-scrollbar-track — 滚动条轨道 ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分 ::-webkit-scrollbar-corner...— 当同时有垂直滚动条和水平滚动条时交汇的部分 ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮) ::-webkit-scrollbar...; overflow: auto; } /* 整个滚动条 */ .container::-webkit-scrollbar { width : 8px; } /* 滚动条里面滑块 */ ....container::-webkit-scrollbar-thumb { border-radius: 10px; background: skyblue; } /*滚动条里面轨道*/ .

19.2K30

Js处理滚动条和日期框

有2种方式 1.通过Js处理滚动条 如果将元素拖动到可见区域之后,再去操作它,也就是处理这个滚动条。...滚动条不是html页面的元素,它是浏览器的元素。想获取浏览器的元素,就不能走常规套路啦,要通过javascript来执行。 不是所有的元素都一定要拖动到可见区域才能操作的。...例如底部的页面跳转:有的系统,虽然进来是这个地方,想操作页面底部的元素,可以操作,也不需要拖动滚动条,它会自动将它拖动到可见区域,然后去操作它。...如果你的被测系统某一个页面当中,因为太长了出现了滚动条,怎么做呢? 第一次,先不滚动,元素在页面最底部,去执行这样的代码,如果它没有报错,那就不用滚动了,直接用就好。...Js中innerText的用法: innerText可获取或设置指定元素标签内的文本值,从该元素标签的起始位置到终止位置的全部文本内容(不包含html标签)。

10.8K10

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

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

17.3K00
领券