scroll属性使用

scroll属性使用,第1张

当有垂直方向的滚动条时候,获取的数据才是正确的。

scrollHeight 获取的是整个页面的高度,包括页面看不到的部分

scrollTop 是被滑动到看不到的部分到视图顶部的距离

clientHeight 是显示在页面上的高度(整个不需要有垂直滚动条,每个元素都可以获取到这个数据,当没有滚动条的时候获取的是元素的高度)

借用知乎网友的一张图

var diffY =documentbodyscrollTop+documentdocumentElementscrollTop;

因为chrome只认识documentbodyscrollTop,360默认应该是谷歌内核。

由于在不同情况下,documentbodyscrollTop与documentdocumentElementscrollTop都有可能取不到值,但documentbodyscrollTop与documentdocumentElementscrollTop两者有个特点,就是同时只会有一个值生效。比如documentbodyscrollTop能取到值的时候,documentdocumentElementscrollTop就会始终为0;反之亦然。所以,如果要得到网页的真正的scrollTop值就用我上面写的那样

documentdocumentElementscrollTop指的是滚动条的垂直坐标

documentdocumentElementclientHeight指的是浏览器可见区域高度

documentdocumentElementclientHeight-oDiv是悬浮框的初始垂直坐标(相对于body的top值)(这个值是固定不变的)

但是当你拉动滚动条的时候,悬浮框的垂直坐标(target)必须要在初始坐标的基础上增减相应的值才能获得视觉上随滚动条滚动的效果,而这个增减的值就是滚动条拉动的距离,即你这个scrollTop

简单研究了没完全解决,相关js混淆了看得眼疼。给您一个思路:在滑动条滚动时候,其实不是简单的让d幕列表滚动而已,他其实在根据滑块的位置,不断清掉不需要显示的d幕,又不断插入需要显示的d幕,也就是d幕列表内不是全部d幕都在里面,而是在根据滑块动态调度显示的内容,因此仅仅用scrollTop(300)更改列表滚动条是无效的,要找到滑块拖动时候触发了哪个JS事件才可以。

默认情况下,点击返回滚动条位置是会保持在原来位置的,不用去设置吧。

或者你可以用导航钩子:

routerbeforeEach((to, from, next) => {//路由变化前执行的函数

documentgetElementsByTagName('body')[0]scrollTop

}

以上就是关于scroll属性使用全部的内容,包括:scroll属性使用、js不兼容360, chrome浏览器,不兼容,不起作用、为啥scrollTop不能用啊等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9301486.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-26
下一篇 2023-04-26

发表评论

登录后才能评论

评论列表(0条)

保存