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

您必须在文档scrollTop元素上获取body，而不是在您的框中。在您的情况下，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

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

1 个答案: