javascript - scrollTop 返回 0，body 除外

Question

我希望这是 scrollTop 的正确行为，但我一直在阅读不同的帖子，所以我真的在寻找为什么会发生这种情况的解释。来自 Jquery 的文档:*

"The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0."

*所以我希望 scrollTop 会随着元素离开视口(viewport)而改变，但是这并没有发生。请参阅 JSFiddle。 http://jsfiddle.net/c4tqy3x4/

相关代码:

$(window).scroll(function(){
    bodyPos= $('body').scrollTop();
    topPos = $('.top').scrollTop();
    $('.body').text('the body element\'s position is: '+bodyPos);
    $('.top').text('the top element\'s position is: '+topPos);
})

根据另一篇文章的记录，这将返回元素相对于视口(viewport)顶部的位置:

$("span").offset().top - $(document).scrollTop()

(参见 Even simplest .scrollTop() example returns 0)

Answer 1

另请注意 scrollTop doc page :

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.

在您的示例中，.top 元素不可滚动，它是一个无论滚动条如何都保持其位置的 block 。

但是，body 是一个可滚动元素，这就是为什么 scrollTop 返回一个表示滚动距离的值的原因。