Question

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

似乎我的代码中有错误，但我无法弄明白......猜猜我还是要吵架......

<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>

此代码表示＆＃34;当p滚动时，执行myFunction（）＆＃34;。除非你的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中定义的高度。在这之后，你的代码没问题：）

在约翰评论中提及link。

JavaScript onscroll函数不会触发

3 个答案: