應該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頂部的可視距離#target改變。

現場示例 | 現場直播

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將變化