vue3中监听滚动条事件

注意：什么挂载事件，什么时候去掉事件；

onMounted(()=>{
    window.addEventListener("scroll", scrolling);
})
onUnmounted(()=>{
    window.removeEventListener("scroll", scrolling);
})

定义scrolling方法：

下面是完整代码

import { onMounted, onUnmounted, reactive } from 'vue'
const data=reactive({
    oldScrollTop:0,
});
const scrolling=()=>{
    // 滚动条距文档顶部的距离
    let scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;
    // 滚动条滚动的距离
    let scrollStep = scrollTop - data.oldScrollTop;
    console.log("header 滚动距离 ", scrollTop);
    // 更新——滚动前，滚动条距文档顶部的距离
    data.oldScrollTop = scrollTop;

    //变量windowHeight是可视区的高度
    let windowHeight =
    document.documentElement.clientHeight || document.body.clientHeight;
    //变量scrollHeight是滚动条的总高度
    let scrollHeight =
    document.documentElement.scrollHeight || document.body.scrollHeight;

    //滚动条到底部的条件
    if (scrollTop + windowHeight == scrollHeight) {
    //你想做的事情
        console.log("header  你已经到底部了");
    }
    if (scrollStep < 0) {
        console.log("header 滚动条向上滚动了！");
    } else {
        console.log("header  滚动条向下滚动了！");
    }
    // 判断是否到了最顶部
    if (scrollTop <= 0) {
        console.log("header 到了最顶部")
    }; 
};

onMounted(()=>{
    window.addEventListener("scroll", scrolling);
})
onUnmounted(()=>{
    window.removeEventListener("scroll", scrolling);
})