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;

}

複製代碼

缺點

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