javascript - 查找元素在浏览器滚动中的位置

Question

我需要一些关于查找元素位置的帮助。 我正在开发一个电子书阅读器，它也是所有带有 CSS 的 Html。 所有 html 都逐页分段，我必须找到这样的元素

<span name="Note" style="background-color:rgb(255,255,204)">Example</span>

每个人都建议这样的代码；

function position(elem) {
    var left = 0,
        top = 0;

    do {
        left += elem.offsetLeft;
        top += elem.offsetTop;
    } while ( elem = elem.offsetParent );

    return [ left, top ];
}position(document.getElementsByName('Note')[0]);

但这对我不起作用；我需要使用 JavaScript 滚动时元素的真实位置。

Answer 1

var note = document.getElementsByName('Note')[0];
var screenPosition = note.getBoundingClientRect();

getBoundingClientRect() 返回的ClientRect具有 .top 的值, .left , .right , .bottom , .width , 和 .height .

这些是可见窗口上的像素位置；当您滚动页面时 .top和 .bottom值会发生变化，甚至可能随着项目滚出 View 顶部而变为负值。

请注意，与累积 offsetLeft 的解决方案不同/offsetTop —这个解决方案正确地考虑了 body 上的边框和填充和 html所有浏览器 (Firefox) 中的元素。

查看此测试用例:http://jsfiddle.net/QxYDe/4/ (滚动页面并观察值的变化)。

还有 supported by Internet Explorer .