为什么脚本在控制台而不是网页中工作



我从火狐控制台尝试过并且可以工作,但是从网页放置时不起作用为什么..?你能解释一下吗

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之间没有链接。

最新更新