查找元素相對於文檔的位置

Question

確定元素相對於文檔/正文/瀏覽器窗口的位置的最簡單方法是什麼？現在我使用的是'.offsetLeft/offsetTop'，但是這種方法只會給你相對於父元素的位置，所以你需要確定身體元素的父母有多少，以知道與身體/瀏覽器相關的位置窗口/文件位置。這種方法也很麻煩。

Answer 1

您可以遍歷offsetParent直到DOM的頂層。

function getOffsetLeft(elem) 
{ 
    var offsetLeft = 0; 
    do { 
     if (!isNaN(elem.offsetLeft)) 
     { 
      offsetLeft += elem.offsetLeft; 
     } 
    } while(elem = elem.offsetParent); 
    return offsetLeft; 
} 

Answer 2

http://www.quirksmode.org/js/findpos.html解釋最好的辦法，總而言之，你在正確的軌道上，你必須找到偏移量，並沿着父母的樹。

Answer 3

您可以使用element.getBoundingClientRect()來獲取相對於視元素位置。

使用scrollY（document.documentElement.scrollTop跨瀏覽器兼容）計算視口偏移量。

兩者的總和將給出相對於元件的位置到文檔：

subjectRect.top + document.documentElement.scrollTop 

Answer 4

我建議使用

element.getBoundingClientRect() 

提議here 代替手工偏移計算的通過offsetLeft， offsetTop and offsetParent。如提議here 在某些情況下*手動遍歷會產生無效結果。請參閱此Plunker：http://plnkr.co/pC8Kgj

*當元素位於具有靜態（=默認）定位的可滾動父級中時。

Answer 5

你可以得到頂部和離開不必通過DOM是這樣的：

function getCoords(elem) { // crossbrowser version 
    var box = elem.getBoundingClientRect(); 

    var body = document.body; 
    var docEl = document.documentElement; 

    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; 
    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft; 

    var clientTop = docEl.clientTop || body.clientTop || 0; 
    var clientLeft = docEl.clientLeft || body.clientLeft || 0; 

    var top = box.top + scrollTop - clientTop; 
    var left = box.left + scrollLeft - clientLeft; 

    return { top: Math.round(top), left: Math.round(left) }; 
} 

Answer 6

如果您使用NPM，document-offset有趣的是，它似乎能夠充分利用這裏的其他答案的方法。用法很簡單：

var offset = require('document-offset') 
var target = document.getElementById('target') 
console.log(offset(target)) 
// => {top: 69, left: 108} 

Answer 7

如果你不介意使用jQuery，那麼你可以使用offset()函數。如果您想了解更多關於此功能的信息，請參閱documentation。

Answer 8

測試在IE 11，鉻62，火狐56，邊緣38：

var box = domElement.getBoundingClientRect(); 
var offsetTop = Math.floor(box.top && box.top || box.y && box.y || 0); 

使用放置offsetLeft/X。