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

节点顶部的距离。

因此，获取元素 based 在

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');
  }
});

Answer 4

从我的 html 标签中删除

overflow: hidden

为我解决了这个问题。

Answer 5

我找到了一种最简单的方法来做到这一点，通过这种方式将事件监听器添加到窗口对象：

window.addEventListener("click", () => {
     let value = window.scrollTop;
     console.log(value);
});

这不是最干净的方法，但这是我让它正常工作的唯一方法。