JavaScript onscroll 函数不会触发

Question

我想做的就是在页面加载时触发一个函数。

似乎有一个错误在我的代码，但我不能找出它…我想我仍然是noobish.

<div class="text-one">
   <p id="hi" onscroll="myFunction()"> Hi, </p>
</div>
function myFunction () {
    document.getElementById("hi").style.color = "blue";
}

Answer 1

<div class="text-one">
   <p id="hi" onscroll="myFunction()"> Hi, </p>
</div>

这段代码的意思是"当p滚动时，执行myFunction()"。这没什么意义，除非你的p标签中有很多文本，用户需要在div中滚动。

:

window.addEventListener('scroll', function() {
   myFunction()
});

现在我们有一个监听器监听用户在窗口中滚动

并不是每个函数都应该从html标签中调用。特别是当上下文不匹配时

Answer 2

你可以这样做，你必须首先有可滚动元素:http://codepen.io/bra1N/pen/bZOXbG

JS:

function myFunction () {
    document.getElementById("hi").style.color = "blue";
} 

CSS:

#hi{
  display: block;
  overflow: scroll;
  height: 400px;
}

Answer 3

首先，你需要确保你的元素是可滚动的，使用如下的CSS:

p#hi
{
   border: 1px solid black;
   width: 200px;
   height: 100px;/*need to specify element height*/
   overflow: scroll;
}

需要内容的高度大于CSS中定义的高度。完成这些之后，您的代码就可以了:)

参考John在你的问题中评论的链接