我从火狐控制台尝试过并且可以工作,但是从网页放置时不起作用为什么..?你能解释一下吗
if(scrollY > 100){
alert('scrolled over');
}
p{
padding-top:300px;
height:2000px;
}
<body>
<p>Scroll on me</p>
</body>
您的代码在控制台上工作的原因是,当您按 Enter 的那一刻,它将执行。如果你想在你的网页中有一个脚本,我建议阅读有关文档加载和窗口事件的信息,特别是滚动事件。
有多种方法可以处理代码,在这种情况下,您不需要等待 DOM 加载完毕,但您确实需要绑定函数,以便每次用户滚动时它都会执行。我做了一个快速片段,执行以下操作:
-
将函数绑定到窗口中的滚动事件
-
检查用户是否已达到滚动位置,如果是,则显示警报一次并等待用户再次向上滚动,如果用户向下滚动,将显示消息。为什么?如果你只是添加你拥有的if条件,它会在每次用户滚动超过100时显示该警报,这很糟糕(这是由于绑定到"scroll"事件而发生的,因为它会在每次用户滚动时调用传递的函数)。
let last_known_scroll_position = 0;
let reached_scroll_pos = false;
window.addEventListener('scroll', function(e) {
let curr_scroll_pos = window.scrollY;
if(!reached_scroll_pos
&& curr_scroll_pos > last_known_scroll_position
&& window.scrollY > 100){
alert("Passed scroll");
reached_scroll_pos = true;
} else if (curr_scroll_pos < last_known_scroll_position
&& curr_scroll_pos < 100)
reached_scroll_pos = false;
last_known_scroll_position = curr_scroll_pos;
});
p{
padding-top:300px;
height:2000px;
}
<body>
<p>Scroll on me</p>
</body>
希望有帮助。
我认为您的问题是代码在加载页面时仅运行一次。您可以尝试不同的事情:
1) 使用事件
2) 使用setInterval()
如果你想收到准确的答案,提供更多的代码,你提供的代码中JS和HTML之间没有链接。