Element.getBoundingClientRect返回元素的大小及其相对视口的位置

Element.getBoundingClientRect()返回元素的大小及其相对视口的位置

在工作的项目中使用的递归的方式获取当前元素的父元素的offsetTop（为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。）进行累加所得到当前元素相对于视口的高度。
偶然发现js有个原生方法就是获取当前元素相对于相对于视口的位置即Element.getBoundingClientRect()

标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。
box-sizing: border-box，元素的的尺寸等于 width/height。

返回值DOMRect

一个DOMRect对象，该对象由该元素的getClientRects()方法返回的一组矩形的集合。即与该元素相关的css边框集合。

DOMRect对象是包含了整个元素的最小矩形（width和height包括padding和border-width）

有一组用于描述整个矩形的位置和大小的只读属性：left，top，right，bottom，x，y，width，height，单位为像素px。除了width和height外的属性都是相对于视口的左上角位置计算的

该对象由该元素的getClientRects()方法返回的一组矩形的集合，即该元素的css边框大小。

如果需要获得边界矩形相对于整个网页左上角的位置，可以通过window.scrollX和window.scrollY获得当前的滚动位置，将当前滚动位置添加到top和left属性上。获得的边界矩形与当前的滚动位置无关。

当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，即当滚动位置发送变化，top和left值会随之改变。所以，他们的值是相对于视口，不是绝对的

视口：浏览器可见区域
pc端：视口可以调整
移动端：视口固定

应用场景

图片懒加载
教程：Nirvana-zsy/图片懒加载Demo
github源码：Nirvana-zsy/lazyLoad

offset

滚动尺寸scroll

注意：获取页面向上滚动的距离，有浏览器兼容性问题。
获取方法：

document.documentElement.scrollTop || document.body.scrollTop

client

具体可看
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect