1、window.addEventListener(event, function, useCapture) 简介
1.event 是事件类型的字符串,例如"click”、"mouseover"或"submit"、“scroll-滚动”
2.function 是事件外理程序函数
3.useCapture 是一个可选的布尔值,表示事件是在捕获阶段还是在冒泡阶段处理,如果省略此参数,则默认为 false,即在冒泡阶段处理事件。
2、实例:监听页面的滚动——window.addEventListener('scroll',callback)
// 获取滚动条高度
const getScrollTop = () => {
let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
return scrollTop
}
// 监听页面的滚动
const initScroll = () => {
// 定义滚动类型(上/下)
let scrollType = 0
let initScrollTop = getScrollTop()
// 监听页面的滚动
window.addEventListener("scroll", () => {
let currentScrollTop = getScrollTop()
// console.log(initScrollTop, '初始滚动条高度');
// console.log(currentScrollTop, '当前滚动条高度');
if (currentScrollTop > initScrollTop) {
// 往下滚动
scrollType = 1
} else {
// 往上滚动
scrollType = 0
}
initScrollTop = currentScrollTop
console.log(scrollType, '滚动类型: 1-往下滚动; 0-往上滚动');
if (scrollType == 1 && currentScrollTop >= 100) {
showHeader.value = false
} else {
showHeader.value = true
}
}, true)
}
// onMounted 执行
onMounted(() => {
initScroll()
})