获取元素相对于视口的位置 Element.getBoundingClientRect() 理解及笔记

之前做超长列表优化、滚动监听、曝光打点时获取元素相对于视口的位置，用到getBoundingClientRect，今天做定位导航再次用到，记录一下

1、概念

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

2、语法

       返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

rectObject = object.getBoundingClientRect();

例如:
rectObject = document.getElementById("eg").getBoundingClientRect();

rectObject.top; //元素顶部到视窗顶部的距离

rectObject.right; //元素右边到视窗左边的距离

rectObject.bottom; //元素底部到视窗顶部的距离

rectObject.left; //元素左边到视窗左边的距离

rectObject.width; //元素的宽度

rectObject.height; //元素的高度

       当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。

3、兼容性（尽量仅使用 left, top, right, 和 bottom.属性是最安全的）
​

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------参考链接
MDN链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect