javascript: scrollTop 和 offsetTop 的区别

Question

在导航到 <a> 元素后，<a> 元素的累积 offsetTop 与 scrollTop 的值之间是否存在可预测的关系？

我天真地认为它们会相等，但我遇到过scrollTop 更大（滚动位置在页面下方）的情况。

以下更准确地定义了问题：

function TotalOffsetTop (e)
{
    var offset = 0;
    do 
        offset += e.offsetTop;
    while (e = e.offsetParent);
    return offset;
}

//navigate to MyBookmark
location.hash = "#MyBookmark"

var BookmarkOffsetTop = TotalOffsetTop(document.getElementByID("MyBookmark"));   
var CurrentPosition = document.getElementsByTagName("body")[0].scrollTop;

if ( CurrentPosition != BookmarkOffsetTop ) alert("Design Flaw!");

我的最终目标是找到最近的<a> 标记，其起点高于当前视口的顶部。这样我就可以相对于文档中的当前位置向后（和向前）跳转到书签。

我应该使用其他一些措施来代替scrollTop 和累积offsetTop吗？

我正在使用 Chrome 探索这个问题，但我想最终找到至少可以在几种现代浏览器中运行的东西。我试图避免使用 jQuery。

Answer 1

主要区别无需赘述：

offsetTop 是只读的，而 scrollTop 是读/写的。 据此，如果你使用 offsetTop，你会更安全：

注意html元素的scrollTop属性！

在早于版本 8 的 Internet Explorer 中，它检索滚动 物理像素大小的数量，而从版本 8 开始，它返回 逻辑像素大小的数量。这是什么意思？如果浏览器不是 在正常缩放级别（用户可以放大或缩小 网页：CTRL 和 +，CTRL 和 -)，scrollTop 属性有效 与版本 8 相比，与早期版本不同。

滚动量是在 Internet Explorer 8 之前的版本中以默认像素大小计算的，即使当前像素大小在 文件不同。 从 Internet Explorer 8 和 Firefox、Opera、Google Chrome 和 Safari 开始，滚动量以当前像素大小计算。

例如，如果缩放级别为 200%，则 scrollTop 属性 在版本 8 之前检索的值是版本的两倍 8 表示相同的滚动位置。

文本来源和两者的更多信息： Source