前言：元素距离视口的距离似乎是老生常谈了，网上一搜一大把，平时没有用到也没在意，今天用到才踩了坑。
解决方案放在最前面：
一、简单介绍一下常用API
**clientWidth,clientHeight：**内容区域的宽高，padding＋content的宽高，不包括边框宽度值。
**offsetLeft,offsetTop：**相对于最近的祖先定位元素。
offsetWidth,offsetHeight： 整个元素的尺寸（border＋padding＋content）
**scrollWidth,scrollHeight：**整个内容区域的宽度，滚动区域内部元素的宽高＋滚动区域自身的padding
**scrollLeft,scrollTop：**元素滚动的大小
二、常见误区
想要获取元素距离窗口顶部的距离经常会看到下面这样的代码
let container = document.getElementById('container') // 获取元素
let top = container.offsetTop - body.scrollTop // 用元素与body之间的距离 - body 滚动的距离
这个方法看似可行，但其实 offsetTop 是相对于最近的祖先定位元素 ，假如container 的父元素有ponsition，那么获取到的就不是距离body的距离了。计算结果错误。
三、解决方案介绍
Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
可以看到该方法返回如下几个值
**top：**元素与视口上部的距离
**left：**元素与视口左部的距离
**right：**元素与视口右部的距离
**bottom：**元素与视口下部的距离
**width、height：**元素的宽高
可以看到当页面滚动时，相应的数值也会发生变化。
成果：
这样图中container 距离视口左边与上边距离未知时，也有办法获取正确的距离，从而计算节点正确的生成位置啦！
参考资料：
developer.mozilla.org/zh-CN/docs/…
个人介绍：
我只是一个在内卷中苦苦挣扎的大专生——天铭，希望和大家共同努力，只要我们足够努力，我们的老板就能早日过上自己想要的日子！
