如何從當前屏幕位置獲取元素的偏移量？

Question

我正在嘗試使用純Javascript重構我的所有jQuery，除了一個非常具體的值之外，我得到了所有工作。 我在這個代碼的瀏覽器供應商中獲得了不同的值：

使用jQuery我會使用：

var topSelected = figure.offset().top - $(window).scrollTop();

這是我在沒有jQuery的情況下使用DOM的（非工作）嘗試：

 var rect = figure.getBoundingClientRect(),
     topSelected = (rect.top + document.body.scrollTop) - window.pageYOffset;

我使用此代碼獲得了Chrome中topSelected的完全相同的值，但不是FF。 瀏覽器與瀏覽器的不同之處在於document.body.scrollTop 。

使用DOM API獲取元素偏移量和滾動頂部之間差異的正確方法是什么？

我需要支持IE9 +，Firefox和Chrome。

Answer 1

 function getPosition(element) { var xPosition = 0, yPosition = 0; while (element) { xPosition += (element.offsetLeft + element.clientLeft); yPosition += (element.offsetTop + element.clientTop); element = element.offsetParent; } return { x: xPosition, y: yPosition }; } function getScroll() { return { x: document.documentElement.scrollLeft || document.body.scrollLeft, y: document.documentElement.scrollTop || document.body.scrollTop }; } document.getElementById('test').addEventListener('click', function() { var pos = getPosition(this), scroll = getScroll(), diff = (pos.x - scroll.x) + ',' + (pos.y - scroll.y); this.childNodes[0].nodeValue = diff; console.log(diff); }, false); 

 body { height: 1000px; width: 1000px; font-family: Consolas, monospace; } #test { display: inline-block; border: 3px solid; padding: 10px; margin-top: 300px; margin-left: 300px; } 

 <div id='test'>Element</div> 

摘要：

最終的函數集可能如下所示：

function getPosition(element) {
    var xPosition = 0,
        yPosition = 0;

    while (element) {
        xPosition += (element.offsetLeft + element.clientLeft);
        yPosition += (element.offsetTop + element.clientTop);
        element = element.offsetParent;
    }
    return {
        x: xPosition,
        y: yPosition
    };
}

function getScroll() {
    return {
        x: document.documentElement.scrollLeft || document.body.scrollLeft,
        y: document.documentElement.scrollTop || document.body.scrollTop
    };
}

function getWindowOffset(element) {
    var pos = getPosition(element),
    scroll = getScroll();

    return {
            x: (pos.x - scroll.x),
            y: (pos.y - scroll.y)
    };
}

然后只需在元素上調用getWindowOffset()以獲取其相對於窗口的位置。

Answer 2

我找到了一個解決方案：

var rect = figure.getBoundingClientRect(),
    topSelected = (rect.top + (document.documentElement.scrollTop || document.body.scrollTo)) - window.pageYOffset;

它的作用是檢查document.documentElement.scrollTop的值。 在Chrome中，它總是返回0.因此，如果返回0，則將document.body作為元素提供給括號外的scrollTop函數。

TL; DR

要正確獲取偏移量：
Firefox - > document.documentElement
Chrome - > document.body