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标签中删除了“高度：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

console.log（inner.offsetTop - document.body.scrollTop）;

element.scrollTop始终返回0

JSFiddle

4 个答案: