使用scrollTop检测滚动

Question

我想记录用户滚动包装器的程度。

以下代码不起作用。我想知道我做错了什么以及如何解决它。谢谢！

const content = document.getElementById('content')
const wrapper = document.getElementById('wrapper').addEventListener('scroll', () => {
  console.log(content.scrollTop)
})

#wrapper {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 250px;
  overflow: auto;
}

#content {
  position: absolute;
  top: 0;
  left: 0;
  background-color: orange;
  width: 50px;
  height: 500px;
}

<div id="wrapper">
  <div id="content"></div>
</div>

Answer 1

它不是content.scrollTop，而是wrapper.scrollTop。

Answer 2

获取匹配元素集中第一个元素的滚动条的当前垂直位置，或为每个匹配元素设置滚动条的垂直位置。

scrollTop()：垂直滚动位置与可滚动区域上方隐藏的像素数相同。如果滚动条位于最顶部，或者元素不可滚动，则此数字将为0。

$('#wrapper').scroll(function() {
  console.log($(this).scrollTop());
});

#wrapper {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 250px;
  overflow: auto;
}

#content {
  position: absolute;
  top: 0;
  left: 0;
  background-color: orange;
  width: 50px;
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="content"></div>
</div>