ele.getBoundingClientRect()使用

ele.getBoundingClientRect()是获取元素的大小以及相对于视口的位置。

执行该方法会获取到元素的width、height、top、left、right、bottom、x和y等属性。其中：

y、top：是指元素上方距离视口上方的距离

x、left：是指元素左侧距离视口左侧的距离

right：是指元素右侧距离视口左侧的距离

bottom：是指元素下方距离视口上方的距离

下方为元素的位置视图：

在浏览器中获取body的相对窗口位置：

下图是当窗口没有法伤滚动时获取的body的位置

下面是发生滚动时body相对窗口的位置

由此可知，获取到的元素的位置时相对于可视窗口的，而不是内容窗口，此时top的绝对值应与父级窗口的scrollTop相同