如何从当前屏幕位置获取元素的偏移量？

我试图用纯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; } 

 
Element 

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