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

Question

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

但是我做的并不重要：它总是给我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);