Question

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

我天真地认为他们是平等的，但我遇到过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不同，与早期版本不同。

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

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

文字来源及两者的更多信息： Source

javascript：scrollTop和offsetTop之间的区别

1 个答案: