背景:使用element-plus插件时,有个元素设置了overflow:auto,导致滚动的并不是window,而是这个元素
未生效写法:
const handleScroll = () => {
let scrollTop = window.pageYOffset
console.log(scrollTop) //scrollTop一直为0
state.isVisible = scrollTop > state.visibilityHeight;
};
onMounted(() => {
window.addEventListener('scroll', handleScroll)
})
正确写法
const handleScroll = () => {
//获取了滚动元素的值
let scrollTop = document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop||document.querySelector('.el-main').scrollTop
console.log(scrollTop)
state.isVisible = scrollTop > state.visibilityHeight;
};
onMounted(() => {
window.addEventListener('scroll', handleScroll,true)
})