jquery - offset().top 是否应该改变

Question

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

Answer 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发生变化。

实例| 直播源

Answer 2

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

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

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

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

您应该看到值的变化

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

所以

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

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

长话短说，你可以说

offset当元素移动scrollTop时会发生变化，并且会在元素滚动时发生变化