如何利用getBoundingClientRect()来实现div容器滚动固定-木庄网络博客

2022-02-05 12:15:45 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者php中世界最好的语言，侵删。

这次给大家带来如何利用getBoundingClientRect()来实现div容器滚动固定，利用getBoundingClientRect()来实现div容器滚动固定的注意事项有哪些，下面就是实战案例，一起来看一下。

ele.getBoundingClientRect()的方法是可以获得一个元素在整个视图窗口的位置

可以return的值有width,height,top,left,x,y,right,bottom

场景

当你的一个div是处在viewport的一个中部位置

你想要的效果是当页面滚动到这个div的时候，这个div就固定在页面的顶部位置，其它滚动不变

思路

实现的思路可以利用这个方法来拿到这个div的top值

相关阅读 >>

更多相关阅读请进入《getBoundingClientRect》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者