为什么滚动时元素的 scrollTop 属性保持为 0？

Question

我正在尝试在项目中使用 scrollTop 属性。

但我做什么并不重要：它总是 returns 我 0。我正在与 Chrome 合作。也尝试了 Firefox，结果相同。

我做了这个演示：

var wrap = document.querySelector('.wrap');

wrap.addEventListener('scroll', function() {
 var sub = document.querySelector('.sub');

 console.log(sub.scrollTop); 
});

body {
  background-color: white; }

.wrap {
  padding: 10px;
  border: 3px solid white;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  overflow: scroll; }

.sub {
  height: 1200px;
  width: 200px;
  background: linear-gradient(orange, green, blue, red); }

<div class="wrap">
  <div class="sub"></div>
</div>

我哪里错了？

分别：为什么我得到这些明显错误的值？ 当它滚动到最底部时，我预计大约 800。

Answer 1

scrollTop 属性应该从实际的滚动元素中读取，.wrap 在您的情况下，而不是该元素的子元素。

而不是：

console.log(sub.scrollTop);

尝试：

console.log(wrap.scrollTop);

为什么滚动时元素的 scrollTop 属性保持为 0？

Why does scrollTop property of element stay 0 when scrolling?

javascript

scroll

scrolltop

为什么滚动时元素的 scrollTop 属性 保持为 0？

Why does scrollTop property of element stay 0 when scrolling?

javascript

scroll

scrolltop

为什么滚动时元素的 scrollTop 属性保持为 0？