Question

我是jQuery的新手，我正在尝试使用滚动功能。通过我的研究，我遇到了scrollTop（）和offset（）作为用于此的工具。我正在运行一个测试，按下按钮会提示offset（）顶部的值。当我滚动一点并按下按钮时，该值会发生变化。我的印象是这个值应该保持不变，因为当我滚动时，从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顶部的可视距离会发生变化。

Live Example | Live Source

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

应该偏移（）。顶部有变化

2 个答案: