getBoundingClientRect的使用

dom元素的getBoundingClientRect()方法返回其大小及其相对于视口的位置,直白一点的说法就是返回它的宽(width)、高(height)以及盒子左上角或右上角距离浏览器可视区域的上部的距离(top)、盒子左下角或右下角距离浏览器可视区域上部的距离(bottom)、盒子左上角或右下角距离浏览器可视区域左部的距离(left)、盒子右上角或右下角距离浏览器可视区域左部的距离(right),借用一幅图来直观的感受下。

本例用到的代码结构如下

运行效果如下:

页面没有产生滚动条的情况下,得到的结果如下图所示:

页面在产生滚动条的情况下,得到的结果如下图所示:

对比两种结果可以发现,元素相对视口的位置会随着页面的滚动发生变化,即它们是一个相对值。

那么怎么获得与滚动无关,元素相对于网页左上角的定位值呢?

公式很简单,根据上面两个例子的分析很容易得出如下公式:

元素距视口的固定值为  top + window.scrollY/left + window.scrollX

window.scrollX:表示文档从左侧开始滚动的像素值,window.scrollY:表示文档从顶部开始滚动的像素值。

相关文章

发表评论