javascript：scrollTop 和 offsetTop 之间的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20482154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript: difference between scrollTop and offsetTop
提问by dlh
Is there a predictable relationship between cummulative offsetTopof an <a>element and the value of scrollTopafter navigating to that <a>element?
是否有累积性之间的关系，可预测offsetTop的的<a>元素和值scrollTop导航到之后<a>元素？
I had naively assumed they would be equal, but I've encountered cases where scrollTopis larger (the scroll position is further down the page).
我天真地认为它们是相等的，但我遇到过scrollTop更大的情况（滚动位置在页面下方）。
The following defines the question more precisely:
以下更准确地定义了问题：
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!");
My ultimate goal is to find the nearest <a>tag whose start is above the top of the current viewport. This is so I can jump backward (and forward) to bookmarks relative to the current position in a document.
我的最终目标是找到最近的<a>标签，其起点高于当前视口的顶部。这样我就可以向后（和向前）跳转到相对于文档中当前位置的书签。
Are there some other measures I should be using instead of scrollTopand cummulative offsetTop?
我应该使用其他一些措施来代替scrollTop累积offsetTop吗？
I'm exploring the problem using Chrome, but I'd like to ultimately find something that works in at least several modern browsers. I'm trying to avoid jQuery.
我正在使用 Chrome 探索这个问题，但我想最终找到至少适用于几种现代浏览器的东西。我试图避免使用 jQuery。
回答by EvilBeer
The main difference without getting into too much detail:
主要区别在不涉及太多细节的情况下：
offsetTop is read-only, while scrollTop is read/write. According to this, you'd be on the safer side if you were to use offsetTop:
offsetTop 是只读的，而 scrollTop 是读/写的。据此，如果您要使用 offsetTop，您会处于更安全的一面：
Be careful about the scrollTop property of the html element!
In Internet Explorer earlier than version 8, it retrieves the scroll amount in physical pixel size, while from version 8, it returns the amount in logical pixel size. What does it mean? If the browser is not at the normal zoom level (the user has the ability to zoom in or out a web page: CTRL and +, CTRL and -), the scrollTop property works differently from version 8 than in earlier versions.
The scroll amount is calculated in the default pixel size in Internet Explorer before version 8 even if the current pixel size in the document is different. From Internet Explorer 8 and in Firefox, Opera, Google Chrome and Safari, the scroll amount is calculated in the current pixel size.
For example, if the zoom level is 200%, the scrollTop property retrieves two times greater values before version 8 than from version 8 for the same scroll position.
注意 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 for the text and more info on the two: Source
文本来源和关于两者的更多信息： 来源
