element.scrollTop始终返回0

Question

我试图获取元素的scrollTop位置,但它总是返回0.我做错了什么,我该如何解决？

的jsfiddle

var inner = document.getElementById('inner');

window.addEventListener('scroll', function() {
  console.log(inner.scrollTop);
})

#outer {
  background-color: tan;
  height: 1000px;
}
#first {
  background-color: bisque;
  height: 200px;
}
#inner {
  background-color: aquamarine;
  height: 100px;
}

<div id="outer">
  <div id="first"></div>
  <div id="inner">scrollTop always returns 0</div>
</div>

Answer 1

正如@FelixKling在评论中指出:

inner.offsetTop是什么用于此.scrollTop返回您在该特定容器中滚动的数量.因为inner没有滚动条,它永远不会滚动,因此scrollTop为0.

但是offsetTop,另一方面,返回当前元素相对于offsetParent节点顶部的距离.

所以式求得滚动元素的量根据上window,将是:

inner.offsetTop - document.body.scrollTop;

Answer 2

出于某种原因，从我的 html 和 body 标签中删除 'height: 100%' 解决了这个问题。

我希望这对其他人有帮助！

Answer 3

我不知道为什么，但我唯一可以开始工作的是使用window.pageYOffset：

window.addEventListener('scroll', function() {
  let scrollPosition = window.pageYOffset;
  if (scrollPosition >= 30) {
    headerContainer.classList.add('lg:bg-green-lightest');
  } else {
    headerContainer.classList.remove('lg:bg-green-lightest');
  }
});