javascript - 使用添加事件监听器创建滚动事件 - Javascript

Question

我试图在普通 JS 中实现一些目标，但它没有发挥作用。我有一个元素想要在一定的滚动长度后更改颜色，但是当我使用 addEventListener('scroll', function) 等时它不起作用，但我的控制台中没有收到任何错误。
任何帮助都会很棒。

艾米丽

代码如下，我这里有一支笔:https://codepen.io/emilychews/pen/eRYwzm

HTML

<div class="box"></div>

CSS

body {height: 200vh;}

.box {
  width: 200px;
  height: 200px;
  background: red;
}

JavaScript

var box = document.getElementsByClassName('box')[0];

window.addEventListener('scroll', function() {

  if (box.scrollTop > 0) {
    box.style.background = "blue";
  }

});

Answer 1

您必须在文档 body 元素上获取 scrollTop，而不是在您的盒子上。在您的情况下，box.scrollTop 将始终为 0。

替换这个:

  if (box.scrollTop > 0) {
    box.style.background = "blue";
  }

这样:

  if (document.body.scrollTop > 0) {
    box.style.background = "blue";
  }

另请注意，目前最好使用 window.pageYOffset，因为 document.body.scrollTop 在严格模式中已被弃用。 Read this了解有关整个窗口滚动检测的更多信息。

演示:https://codepen.io/anon/pen/mwdZwL