javascript - 返回的 y 值大于实际 y 位置 [JS (no jQ)/DOM]

Question

我通过以下两种方式之一计算元素 el 的 y 位置:

var elTop = 0;                    
do{
    el += el.offsetTop;
    }while(el = el.offsetParent); 
    window.scrollTo(0, elTop);

和

   var elTop = (el.getBoundingClientRect()).top;
   window.scrollTo(0, elTop);

在这两种情况下，elTop 都太高，而 scrollTo 跳得太远。

我在线试过这个脚本。当我用 Firefox 下载整个页面时，它突然起作用了。在视觉外观或结构上在线/离线没有差异。 只有 body 的 offsetHeight 和搜索到的元素的 offsetTop 发生了变化。

这些属性如何在没有任何视觉效果的情况下发生变化？

Answer 1

为避免上述问题，您应该考虑使用 getBoundingClientRect() + “页面滚动”，而不是计算所有元素的偏移量。

var yPosition = element.getBoundingClientRect().top + window.pageYOffset;

http://jsbin.com/ukuRaXe/2/edit

请注意，此解决方案不适用于 < IE9。