添加事件监听器创建一个滚动事件 - Javascript

问题描述：

我试图在香草JS中实现某些东西，但它不是在玩球。我有一个元素，我想改变一定的滚动长度后的颜色，但是当我使用addEventListener（'滚动'，函数）等它不工作，但我没有得到我的控制台中的任何错误。
任何帮助将是真棒。添加事件监听器创建一个滚动事件 - Javascript

艾米莉

的代码如下，我这里有一个笔：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"; 
    } 

});

这是因为'box.scrollTop'总是返回'0'。在你的'if（）'语句上面添加'console.log（box.scrollTop）;'，你会在控制台中看到'box.scrollTop'的结果。 – NewToJS

答

您必须在文档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

非常感谢Cristy –

添加事件监听器创建一个滚动事件 - Javascript

相关推荐