前言：元素距離視口的距離似乎是老生常談了香伴，網(wǎng)上一搜一大把瀑粥，平時沒有用到也沒在意魔熏，今天用到才踩了坑。
解決方案放在最前面：
一瘦麸、簡單介紹一下常用API
clientWidth,clientHeight：內(nèi)容區(qū)域的寬高谁撼，padding＋content的寬高，不包括邊框?qū)挾戎怠?/p>
offsetLeft,offsetTop：相對于最近的祖先定位元素滋饲。
offsetWidth,offsetHeight：整個元素的尺寸（border＋padding＋content）
scrollWidth,scrollHeight：整個內(nèi)容區(qū)域的寬度厉碟，滾動區(qū)域內(nèi)部元素的寬高＋滾動區(qū)域自身的padding
scrollLeft,scrollTop：元素滾動的大小
二、常見誤區(qū)
想要獲取元素距離窗口頂部的距離經(jīng)常會看到下面這樣的代碼
let container = document.getElementById('container') // 獲取元素
let top = container.offsetTop - body.scrollTop // 用元素與body之間的距離 - body 滾動的距離復(fù)制代碼
這個方法看似可行屠缭，但其實offsetTop 是相對于最近的祖先定位元素箍鼓，假如container 的父元素有ponsition，那么獲取到的就不是距離body的距離了呵曹。計算結(jié)果錯誤款咖。
三何暮、解決方案介紹
Element.getBoundingClientRect()方法返回元素的大小及其相對于視口的位置。
可以看到該方法返回如下幾個值
top：元素與視口上部的距離
left：元素與視口左部的距離
right：元素與視口右部的距離
bottom：元素與視口下部的距離
width铐殃、height：元素的寬高
可以看到當(dāng)頁面滾動時郭卫，相應(yīng)的數(shù)值也會發(fā)生變化。
成果：
這樣圖中container 距離視口左邊與上邊距離未知時背稼，也有辦法獲取正確的距離，從而計算節(jié)點正確的生成位置啦玻蝌！
參考資料：
developer.mozilla.org/zh-CN/docs/…
個人介紹：
我只是一個在內(nèi)卷中苦苦掙扎的大專生——天銘蟹肘，希望和大家共同努力，只要我們足夠努力俯树，我們的老板就能早日過上自己想要的日子帘腹！
