css javascript语言|如何在用户滚动了一定量之后触发事件

64jmpszr  于 2022-12-20  发布在  Java
关注(0)|答案(1)|浏览(81)

我希望在用户滚动后触发一个事件,比如在另一个事件发生后触发300px。
简单地说,一个例子是:
我希望用户首先按下一个按钮,然后按下按钮后,当他滚动了一定量,一个事件被触发,如果用户没有按下按钮,那么事件不会触发。按钮可以在视口中的任何地方,例如:并且滚动量应当相对于按钮被按下时而不是从页面的开始被考虑。
注意:这只是一个例子来解释我想做什么,这并不是我想做的,但一般的逻辑会有所帮助,谢谢。

vuv7lop3

vuv7lop31#

你不需要IntersectionObserver,你可以在window上添加一个scroll监听器,当窗口的scrollY超过限制时触发一个事件(在本例中:300美元):

const button = document.querySelector('button')

let scrolled = false
window.addEventListener('scroll', function(){
  if(window.scrollY > 300 && !scrolled) {
    scrolled = true;
    button.click()
  }
})

button.addEventListener('click', () => console.log('button clicked'))
body{
  height: 1000px;
}
<button>This button will be clicked after you scroll 300px</button>

在您的特定情况下,可以使用一个标志来指示按钮是否已被单击,以确定滚动后是否触发事件:
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

相关问题