getBoundingClientRect使用指南

getBoundingClientRect使用指南
author: @TiffanysBear

主要介紹getBoundingClientRect的基本屬性，以及具體的使用場景和一些須要注意的問題。

getBoundingClientRect

Element.getBoundingClientRect()

含義：
方法返回元素的大小及其相對於視口的位置。

值：
返回值是一個 DOMRect 對象，這個對象是由該元素的 getClientRects() 方法返回的一組矩形的集合, 即：是與該元素相關的CSS 邊框集合。

屬性值：

• top: 元素上邊距離頁面上邊的距離
• left: 元素右邊距離頁面左邊的距離
• right: 元素右邊距離頁面左邊的距離
• bottom: 元素下邊距離頁面上邊的距離
• width: 元素寬度
• height: 元素高度

注意：
若是全部的元素邊框都是空邊框，那麼這個矩形給該元素返回的 width、height 值爲0，left、top值爲第一個css盒子（按內容順序）的top-left值。

當計算邊界矩形時，會考慮視口區域（或其餘可滾動元素）內的滾動操做，也就是說，當滾動位置發生了改變，top和left屬性值就會隨之當即發生變化（所以，它們的值是相對於視口的，而不是絕對的）。若是你須要得到相對於整個網頁左上角定位的屬性值，那麼只要給top、left屬性值加上當前的滾動位置（經過window.scrollX和window.scrollY），這樣就能夠獲取與當前的滾動位置無關的值。

如圖所示：
當頁面的元素在瀏覽器的左上角時，獲得的top和left值爲負值，right和bottom值爲正值。

應用場景一

一、獲取dom元素相對於網頁左上角定位的距離

之前的寫法是經過offsetParent找到元素到定位父級元素，直至遞歸到頂級元素body或html。

// 獲取dom元素相對於網頁左上角定位的距離
function offset(el) {
    var top = 0;
    var left = 0;
    // 獲取元素的位置還有getBoundingClientRect的方法
    // 從網上得知offset的兼容較差並且設置translate3D的y軸值給元素定位了y軸的距離後
    //會出現offsetTop爲0
    do {
        top += el.offsetTop;
        left += el.offsetLeft;
    }
    while(el = el.offsetParent);// 存在兼容性問題，須要兼容
    
    
    return {
        top: top,
        left: left
    }
}

測試代碼以下：

var odiv = document.getElementsByClassName('markdown-body');
offset(a[0]); // {top: 271, left: 136}

如今根據getBoundingClientRect這個api，能夠寫成這樣：

var positionX = this.getBoundingClientRect().left + document.documentElement.scrollLeft;
var positionY = this.getBoundingClientRect().top + document.documentElement.scrollLeft;

應用場景二

二、判斷元素是否在可視區域內

function isElView(el) {
    var top = el.getBoundingClientRect().top; // 元素頂端到可見區域頂端的距離
    var bottom = el.getBoundingClientRect().bottom; // 元素底部端到可見區域頂端的距離
    var se = document.documentElement.clientHeight; // 瀏覽器可見區域高度。
    
    if (top < se && bottom > 0) {
        return true;
    }
    else if (top >= se || bottom <= 0) {
        // 不可見
    }
    return false;
}

缺點

這個屬性頻繁計算會引起頁面的重繪，可能會對頁面的性能形成影響。