javascript - 如何找到与 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);