詳細解析 JavaScript 獲取元素的坐標

 引言

　　最近突然看到了有關圖片懶加載的問題，大致意思就是初始狀態下頁面只加載瀏覽器可視區域的圖片，剩余圖片在當瀏覽器可視區域滾動到其位置時才開始加載。貌似現在許多大型網站都有實現懶加載，所以我便就此問題思考了一下。首先第一個問題是瀏覽器沒有相關的 API 方法可以檢測某個元素是否在可視區域，那么就只能我們人工計算，所以這里就涉及到了元素長寬，滾動條位置的知識。本文涉及的到的知識有元素長寬 clientWidth/offsetWidth/scrollWidth 的區別、以及 clientTop/offsetTop/scrollTop 的區別，並給了獲取元素坐標的源代碼。

 一、 clientWidth、offsetWidth、scrollWidth 的區別

　　通常大家獲取元素的長寬的時候都會使用一些框架封裝好的方法，比如 jQuery.prototype.width() ，這些框架使用起來方便快捷，不過其中涉及到的知識還是非常多的，關於元素的長寬，有多種的獲取方法，其代表的實際意義也是不同的。

　　簡單來說可以使用下列公式：

　　clientWidth = width(可視區) + padding

　　offsetWidth = width(可視區) + padding + border

　　scrollWidth = width(內容區)　

　　假設有我們以下一個元素：

#test {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 10px solid #293482;
  padding: 10px;
  background-color: yellow;
  overflow: auto;
}

clientWidth	offsetWidth	scrollWidth

 　　以上 DEMO 是常規情況下的區別，下面加上一個滾動條我們們再來觀察以下：

clientWidth	offsetWidth	scrollWidth
注意這里不包括滾動條的長度		這里實際上相當於內容的寬度

 二、clientTop、offsetTop、scrollTop 的區別

　　我們使用以下公式：

　　clientTop = border

　　offsetTop = 元素邊框外圍至父元素邊框內圍

　　scrollTop = 元素可視區域頂部至實際內容區域的頂部

　　給定以下兩個元素 container 和 test

#container {
   background-color: #F08D8D;
   padding: 10px;
}
#test {
   position: relative;
   top: 10px;
   width: 100px;
   height: 100px;
   margin: 20px;
   border: 15px solid #293482;
   padding: 10px;
   background-color: yellow;
}

clientTop	offsetTop	scrollTop

 三、獲取頁面元素絕對定位坐標

 　　有了以上知識基礎之后，我們現在需要考慮的問題是，如何獲取頁面元素的絕對位置，也就是在文檔流內容區的位置。我們知道，元素的 offsetTop 屬性可以獲取當前元素邊框外圍至父元素邊框內圍的的距離，clientTop 可以獲取元素邊框的寬度。那么現在用一個遞歸的公式就可以求得當前元素在頁面中的絕對位置：

　　Element.absoluteTop = Element.parent.absoluteTop + Element.offsetTop + Element.clientTop;

　　同理，我們用參照元素的長寬減去 left 和 top 和定位，即可得到 right 和 bottom 的定位；

 　　所以我們可以編寫以下工具來獲取元素的絕對位置，也就是在內容區的定位（參照元素必須是目標元素的祖先元素）：

var Position = {};
(function () {
    Position.getAbsolute = function (reference, target) {
        //因為我們會將目標元素的邊框納入遞歸公式中，這里先減去對應的值
        var result = {
            left: -target.clientLeft,
            top: -target.clientTop
        }
        var node = target;
        while(node != reference && node != document){
            result.left = result.left + node.offsetLeft + node.clientLeft;
            result.top = result.top + node.offsetTop + node.clientTop;
            node = node.parentNode;
        }
        if(isNaN(reference.scrollLeft)){
            result.right = document.documentElement.scrollWidth - result.left;
            result.bottom = document.documentElement.scrollHeight - result.top;
        }else {
            result.right = reference.scrollWidth - result.left;
            result.bottom = reference.scrollHeight - result.top;
        }
        return result;
    }
})();

　　此方法可以獲取一個元素相對於一個父元素的定位，如果要獲取元素在整張頁面，直接傳入 document 即可：

Position.getAbsolute(document, targetNode); //{left: left, right: right, top: top, bottom: bottom}

 四、獲取元素的可視區定位坐標

　　在上一小節中，我們封裝了一個函數，這個函數可以用來獲取一個元素的相對於一個祖先元素的絕對定位坐標，在這一小節中，我們來獲取元素相對於瀏覽器窗口可視區域的定位坐標。在上一個函數中，我們可以獲取一個元素在 document 當中的定位，還記得我們在第二小節中的 scrollTop 屬性嗎？該屬性可以獲取滾動窗口可視區域頂端距離內容區頂端的距離，我們用元素的絕對定位坐標減去 document 的滾動定位就是我們想要的瀏覽器窗口定位啦（相對於瀏覽器左上角）：

　　ViewportTop = Element.absoluteTop - document.body.scrollTop;

　　這里需要注意一個兼容性的問題，在 Chrome 中可以用 document.body.scrollTop 和 window.pageYOffset，IE 7/8 只能通過 document.documentElement.scrollTop 獲取， FireFox 和 IE9+ 可以用 document.documentElement.scrollTop 和 window.pageYOffset 獲取，Safari 需要 window.pageYOffset 獲取。所以這里我們需要做一下瀏覽器兼容：

　　scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

　　注意這里的順序，在 IE7/8 中 window.pageYOffset 是 undefined ，document.body.scrollTop 在任何瀏覽器中都有，只是不支持的值為 0，如果表達式返回 undefined ，會影響后面的計算操作。而 || 運算符是一個短路取真運算符，所以我們要所有瀏覽器都有的 document.body.scrollTop 方法放在最后，關於 || 運算符的問題，可以參考 《探尋 JavaScript 邏輯運算符（與、或）的真諦》。

　　我們在剛才的工具上添加一個方法：

var Position = {};
(function () {
    Position.getAbsolute = function (reference, target) {
        var result = {
            left: -target.clientLeft,
            top: -target.clientTop
        }
        var node = target;
        while(node != reference && node != document){
            result.left = result.left + node.offsetLeft + node.clientLeft;
            result.top = result.top + node.offsetTop + node.clientTop;
            node = node.parentNode;
        }
        if(isNaN(reference.scrollLeft)){
            result.right = document.documentElement.scrollWidth - result.left;
            result.bottom = document.documentElement.scrollHeight - result.top;
        }else {
            result.right = reference.scrollWidth - result.left;
            result.bottom = reference.scrollHeight - result.top;
        }
        return result;
    }
    Position.getViewport = function (target) {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
        var absolutePosi = this.getAbsolute(document, target);
        var Viewport = {
            left: absolutePosi.left - scrollLeft,
            top: absolutePosi.top - scrollTop,
        }
        return Viewport;
    }
})();

　　通過 Position.getViewport 方法可以獲取元素相對於瀏覽器窗口的定位：

Postion.getViewport(targetNode);  //{left: left, top: top}

 五、判斷可視區域

　　在上面的幾個方法中，我們可以獲取元素的文檔流定位和視窗定位，不過這還是不能判斷一個元素是否在可視區域內，因為視窗定位可以是非常大的數字，這樣元素就在視窗的后面。這里我們需要使用瀏覽器視窗高度 window.innerHeight 屬性，在 IE8 以下需要用 document.documentElement.clientHeight 來獲取。

　　windowHeight = window.innerHeight || document.documentElement.clientHeight;

　　現在，我們用窗口的高度，減去相對於瀏覽器窗口的定位，即可獲取相對於瀏覽器窗口右下角的定位；

var Position = {};
(function () {
    Position.getAbsolute = function (reference, target) {
        var result = {
            left: -target.clientLeft,
            top: -target.clientTop
        }
        var node = target;
        while(node != reference && node != document){
            result.left = result.left + node.offsetLeft + node.clientLeft;
            result.top = result.top + node.offsetTop + node.clientTop;
            node = node.parentNode;
        }
        if(isNaN(reference.scrollLeft)){
            result.right = document.documentElement.scrollWidth - result.left;
            result.bottom = document.documentElement.scrollHeight - result.top;
        }else {
            result.right = reference.scrollWidth - result.left;
            result.bottom = reference.scrollHeight - result.top;
        }
        return result;
    }
    Position.getViewport = function (target) {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
        var windowHeight = window.innerHeight || document.documentElement.offsetHeight;
        var windowWidth = window.innerWidth || document.documentElement.offsetWidth;
        var absolutePosi = this.getAbsolute(document, target);
        var Viewport = {
            left: absolutePosi.left - scrollLeft,
            top: absolutePosi.top - scrollTop,
            right: windowWidth - (absolutePosi.left - scrollLeft),
            bottom: windowHeight - (absolutePosi.top - scrollTop)
        }
        return Viewport;
    }
})();

　　現在我們使用 Position.getViewport(targetNode) 方法可以獲取元素左上角相對於窗口4個方向的定位：

Position.getViewport(targetNode);  //{left: left, top: top, right: right, bottom: bottom}

　　有了這個方法，現在就可以真正的判斷元素是否在可視區域內了：

var Position = {};
(function () {
    Position.getAbsolute = function (reference, target) {
        //因為我們會將目標元素的邊框納入遞歸公式中，這里先減去對應的值
        var result = {
            left: -target.clientLeft,
            top: -target.clientTop
        }
        var node = target;
        while(node != reference && node != document){
            result.left = result.left + node.offsetLeft + node.clientLeft;
            result.top = result.top + node.offsetTop + node.clientTop;
            node = node.parentNode;
        }
        if(isNaN(reference.scrollLeft)){
            result.right = document.documentElement.scrollWidth - result.left;
            result.bottom = document.documentElement.scrollHeight - result.top;
        }else {
            result.right = reference.scrollWidth - result.left;
            result.bottom = reference.scrollHeight - result.top;
        }
        return result;
    }
    Position.getViewport = function (target) {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
        var windowHeight = window.innerHeight || document.documentElement.offsetHeight;
        var windowWidth = window.innerWidth || document.documentElement.offsetWidth;
        var absolutePosi = this.getAbsolute(document, target);
        var Viewport = {
            left: absolutePosi.left - scrollLeft,
            top: absolutePosi.top - scrollTop,
            right: windowWidth - (absolutePosi.left - scrollLeft),
            bottom: windowHeight - (absolutePosi.top - scrollTop)
        }
        return Viewport;
    }
    Position.isViewport = function (target) {
        var position = this.getViewport(target);
        //這里需要加上元素自身的寬高，因為定位點是元素的左上角
        if(position.left + target.offsetWidth < 0 || position.top + target.offsetHeight < 0){
            return false;
        }
        if(position.bottom < 0 || position.right < 0){
            return false;
        }
        return true;
    }
})();

　　判斷理由很簡單，如果有一邊的定位是負值，那么元素就不在視窗內。

Position.getAbsolute(document, targetNode);  //獲取元素在文檔流中的絕對坐標
Position.getViewport(targetNode);  //獲取元素相對於瀏覽器視窗的坐標
Position.isViewport(targetNode);  //判斷元素是否在瀏覽器視窗內

 

 　　瀏覽器兼容性：

Chrome	FireFox	IE	Safari	Edge
Support	Support	IE8+ Support	Support	Support

　　IE7 也可以使用，不過結果可能會有一點差異。

 擴展：圖片懶加載

　　在文章的開始，我們提到過圖片懶加載的問題，那么具體需要怎么實現呢？這里只是給出一個思路：

　　初始狀態下不設置 img 的 src，將圖片的真實 url 緩存在 Img 標簽上，我們可以設置為 data-src ，這樣圖片就不會加載了，隨后給鼠標添加 mousescroll 事情，每次鼠標滾動的時候將進入可視區域的圖片的 src 還原，這樣也就實現了圖片懶加載效果。不過初始狀態下需要將頁面可視區域的圖片先加載出來。

 參考文獻：

　　阮一峰 — 用 JavaScript 獲取元素頁面元素位置

　　張媛媛 — js實現一個圖片懶加載插件