scrollTop元素始终返回0

Question

我试图记录一个元素在页面下方的距离，但是在我的控制台中我一直得到0。

window.addEventListener('scroll', function() {

  var selector = document.getElementById("footer");

  console.log(selector.scrollTop );

});

从阅读中可以看出，如果正文应用了溢出或高度，则似乎存在webkit错误。不过我已经在IE和Firefox中尝试了这一点，并且禁用了所有CSS，并且我一直得到相同的结果。

Answer 1

改为使用offsetTop。

window.addEventListener('scroll', function() {

  var selector = document.getElementById("footer");

  console.log(selector.offsetTop);

});

在线演示 - https://plnkr.co/edit/JdeFnB6IZodL0b74pO2S?p=preview

• 检查控制台输出，iv设置一个间隔以触发打印

  

Answer 2

对于相对于页面顶部的元素位置，我使用：

console.log(selector.getBoundingClientRect().top + window.pageYOffset);

对于相对于视口顶部的元素位置，我使用：

console.log(selector.getBoundingClientRect().top);

文档：

• getBoundingClientRect()
• pageYOffset

正如Michael Zhang在评论中所提到的，selector.scrollTop告诉你元素本身已经滚动了多少像素（read more）。

selector.offsetTop是距离最近的相对定位的父元素（read more）顶部的像素数。