如何从scrollTop找到距离？

Question

我做了this fiddle：

var outer = document.querySelectorAll('.outer');

setInterval(function() {
  // console.log(outer.scrollY); // undefined 
  // console.log(outer.scrollTop); // undefined
}, 500);

.outer {
  width: 220px;
  height: 150px;
  border: 1px solid black;
  overflow-y: scroll;
  overflow-x: hidden;
}
.inner {
  position: relative;
  width: 200px;
  height: 120px;
}

<div class="outer">
  <div class="inner" style="background-color:red"></div>
  <div class="inner" style="background-color:yellow"></div>
  <div class="inner" style="background-color:green"></div>
  <div class="inner" style="background-color:blue"></div>
</div>

我需要 setInterval 才能从顶部获得正确的距离。但它总是返回undefined。我已经阅读了一些相关的问题，我发现的唯一区别是我没有使用window.scrollTop，但那是因为我不会滚动window，我会滚动.outer元件。我需要知道outer.scrollTop，我遇到了麻烦。

有什么想法吗？

Answer 1

它没有按预期工作，因为.querySelectorAll() method会返回NodeList个元素。您正在尝试检索集合的scrollTop属性（显然不起作用）。您需要检索集合中特定元素的scrollTop属性。

您可以访问该NodeList中的第一个元素：

var outer = document.querySelectorAll('.outer');

setInterval(function() {
  console.log(outer[0].scrollTop);
}, 500);

或者改为使用.querySelector() method：

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

setInterval(function() {
  console.log(outer.scrollTop);
}, 500);