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

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 滚动中的实际位置。

原文由 relower 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

The ClientRect returned by getBoundingClientRect() has values for .top , .left , .right , .bottom , .width 和 .height 。

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

Note that—unlike the solution accumulating offsetLeft / offsetTop solution properly accounts for borders and padding on the body and html elements in所有浏览器（火狐）。

请参阅此测试用例：http: //jsfiddle.net/QxYDe/4/ （滚动页面并观察值的变化）。

Internet Explorer 也支持。

原文由 Phrogz 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

    return [ left, top ];
}
var elem = document.getElementById('id');
position(elem);

Subtract the scroll positions.

原文由 Niet the Dark Absol 发布，翻译遵循 CC BY-SA 4.0 许可协议