offset().top 是否应该改变答案

【问题标题】：Should offset().top ever changeoffset().top 是否应该改变
【发布时间】：2013-07-22 21:30:16
【问题描述】：

我对 jQuery 很陌生，正在尝试用滚动来做一些事情。通过我的研究，我发现了 scrollTop() 和 offset() 作为用于此目的的工具。我正在运行一个测试，按下按钮会提醒 div 的 offset().top 的值。当我滚动一点并按下按钮时，该值会发生变化。我的印象是这个值应该保持不变，因为当我滚动时，从 div 到文档顶部的距离不会改变。有人可以解释为什么会这样吗？

【问题讨论】：

请提供使用jsfiddle的测试示例
您可能正在移动某些东西，无论是文档还是元素，因为滚动本身不应该改变偏移量。
你是滚动整个页面还是一个div？
"...使用 jsfiddle 进行测试的示例..." 或 jsbin.com，并且总是将代码和标记放在问题。
我只滚动 div

标签： jquery html css

【解决方案1】：

如果您正在测量的元素位于可滚动容器中，那么是的，top 可以更改，因为考虑了容器的滚动。 top 将是从文档顶部到元素的视觉距离。如果元素有一个滚动的容器，并且您更改了滚动，则该距离会发生变化。

考虑：

<div style="height: 300px; overflow: scroll">
  <p>x</p>
  <!-- lots and lots more of those -->
  <p id="target">click me</p>
</div>

如果滚动包含div，则从文档顶部到#target 顶部的视觉距离会发生变化。

Live Example | Live Source

【讨论】：

【解决方案2】：

Element.offset().top; 是元素从文档顶部算起的像素数量，所以如果你这样做

alert( $('#element').offset().top );

$('#element').css('margin-top', '50px');

alert( $('#element').offset().top );

你应该看到值的变化

而scrollTop(); 用于可滚动元素，因此它将检测滚动条向下的距离这仅适用于 html 或 body 除非您的元素具有 overflow:scroll

所以

alert( $('#element').scrollTop() );
// Scroll the Element within 5 seconds

window.setTimeout(function(){ 
    alert( $('#element').scrollTop() );
}, 5000);

长话短说，你可以说

offset 在元素移动时改变，scrollTop 在元素滚动时改变

【讨论】：