>[danger]介紹一下Js中的getBoundingClientRect `getBoundingClientRect()` 是一個用于獲取元素位置和尺寸信息的方法。它返回一個 DOMRect對象，其提供了元素的大小及其相對于視口的位置，其中包含了以下屬性： * `x`：元素左邊界相對于視口的 x 坐標。 * `y`：元素上邊界相對于視口的 y 坐標。 * `width`：元素的寬度。 * `height`：元素的高度。 * `top`：元素上邊界相對于視口頂部的距離。 * `right`：元素右邊界相對于視口左側的距離。 * `bottom`：元素下邊界相對于視口頂部的距離。 * `left`：元素左邊界相對于視口左側的距離。 ``` const box = document.getElementById('box'); const rect = box.getBoundingClientRect(); console.log(rect.x); // 元素左邊界相對于視口的 x 坐標 console.log(rect.y); // 元素上邊界相對于視口的 y 坐標 console.log(rect.width); // 元素的寬度 console.log(rect.height); // 元素的高度 console.log(rect.top); // 元素上邊界相對于視口頂部的距離 console.log(rect.right); // 元素右邊界相對于視口左側的距離 console.log(rect.bottom); // 元素下邊界相對于視口頂部的距離 console.log(rect.left); // 元素左邊界相對于視口左側的距離 ``` 為了更好地理解，我在頁面上設置了一個容器，其對應屬性看下圖：  >[info]應用場景 這個方法通常用于需要獲取元素在視口中的位置和尺寸信息的場景，比如實現拖拽、定位或響應式布局等，兼容性很好，一般用滾動事件比較多。 特殊場景會用上，比如你登錄了淘寶的網頁，當你下拉滑塊的時候，下面的圖片不會立即加載出來，有一個懶加載的效果。當上面一張圖片沒在可視區內時，就開始加載下面的圖片。 下面代碼就是判斷一個容器是否出現在可視窗口內： ``` const box = document.getElementById('box') window.onscroll = function () {//window.addEventListener('scroll',()=>{}) console.log(checkInView(box)); } function checkInView(dom) { const { top, left, bottom, right } = dom.getBoundingClientRect(); return top > 0 && left > 0 && bottom <= (window.innerHeight || document.documentElement.clientHeight) && right <= (window.innerWidth || document.documentElement.clientWidth) } ``` 當容器在可視區域內就輸出`true`，否則就是`false`。