javascript - 如何从元素中获取scrollTop？

我有一个div元素，其中包含其他一些元素，例如p标签和菜单。我希望菜单在用户向下滚动约100像素时向菜单添加一个类。因此，我试图找出如何获得滚动距离。

<script type="text/javascript">
  var x = document.getElementById("scrollElement");

  function myFunction() {
    alert(x.scrollTop);
  }
</script>

我创建了一个模拟现实情况的插件。问题是，当我滚动并检查scrollTop值时，它输出0。

这是plunkr

为什么要下票？这是一个普通的javascript问题，并且有一个清楚的例子说明了问题所在：/

最佳答案

Element.scrollTop本质上是DIV的顶部边框和DIV的最顶部可见线之间的距离。为了更好地理解read this。

var container = document.querySelector(".container"),
    p         = document.querySelector("p.child");

container.addEventListener('scroll', function() {
  if(container.scrollTop > 100)
    p.classList.add('red');
  else
    p.classList.remove('red');
});

.container {
  max-height: 200px;
  border: 1px solid black;
  overflow-y: auto;
}

h1.child {
  text-align: center;
  height: 400px;
}

p.child.red {
  color: red;
}

<div class="container">
  <h1 class="child">HELLO!</h1>
  <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>