相当于window.scrollY的div

Question

使用普通JS来检测用户在div元素中垂直滚动了多少的最佳方法是什么？这些是我的代码片段：

html

<div id="blaaaa">
<!-- DIV CONTENT -->
</div>

js

document.getElementById('blaaaa').addEventListener('scroll', this.handleScroll);

handleScroll(e) {
  // I want to use an equivalent of window.scrollY but for a single div element
  var scrolled = window.scrollY;
  // ...
},

我该怎么做？

感谢您的回答。节日快乐！

Answer 1

使用scrollTop：

scrollTop

document.getElementById("container").addEventListener("scroll", evt => 
  console.log(evt.target.scrollTop)
)

#container {
  height: 300px;
  width: 300px;
  background: cyan;
  overflow-y: scroll;
}

#content {
  height: 1000px;
  width: 100%;
}

Answer 2

如果问题是如何最好地使用JS来检测用户在div元素中垂直滚动了多少，对我来说这也意味着拥有易于阅读的代码，那么就是这样（但这是我的个人观点）。

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

const scrollVal = document.getElementById('scroll-val')
  ,   blaaaaElm = document.getElementById('blaaaa')
  ;
blaaaaElm.onscroll=e=>
  {
  scrollVal.textContent = blaaaaElm.scrollTop;
  }

#blaaaa {
  width: 100px;
  height: 100px;
  overflow-y: scroll;
  background-color: palegoldenrod;
}