前言：元素距离视口的距离似乎是老生常谈了，网上一搜一大把，平时没有用到也没在意，今天用到才踩了坑。
解决方案放在最前面：
image
一、简单介绍一下常用API
image
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()方法返回元素的大小及其相对于视口的位置。
image
可以看到该方法返回如下几个值
top：元素与视口上部的距离
left：元素与视口左部的距离
right：元素与视口右部的距离
bottom：元素与视口下部的距离
width、height：元素的宽高
image
可以看到当页面滚动时，相应的数值也会发生变化。
成果：
这样图中container 距离视口左边与上边距离未知时，也有办法获取正确的距离，从而计算节点正确的生成位置啦！
参考资料：
developer.mozilla.org/zh-CN/docs/…
个人介绍：
我只是一个在内卷中苦苦挣扎的大专生——天铭，希望和大家共同努力，只要我们足够努力，我们的老板就能早日过上自己想要的日子！
