vue3监听页面向上滚动

在Vue3中，可以通过监听页面滚动事件来实现监听页面向上滚动。具体实现方法如下：

1. 在mounted()生命周期函数中，使用window.addEventListener()方法监听页面滚动事件，将事件处理函数设置为this.scrolling。

2. 在methods对象中定义scrolling()方法，该方法会在页面滚动时被调用。在该方法中，可以获取滚动条距文档顶部的距离scrollTop，以及滚动条滚动的距离scrollStep。

3. 根据scrollStep的正负值，可以判断页面是向上滚动还是向下滚动。

4. 可以使用变量windowHeight获取可视区的高度，使用变量scrollHeight获取滚动条的总高度。当scrollTop + windowHeight等于scrollHeight时，说明页面已经滚动到了底部。

5. 在beforeDestroy()生命周期函数中，使用window.removeEventListener()方法移除页面滚动事件的监听。

下面是一个示例代码，用于监听页面向上滚动：

mounted() {
window.addEventListener("scroll", this.scrolling);
},
methods: {
scrolling() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
let scrollStep = scrollTop - this.oldScrollTop;
console.log("页面滚动距离 ", scrollTop);
this.oldScrollTop = scrollTop;
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
if (scrollTop + windowHeight == scrollHeight) {
console.log("你已经到底部了");
}
if (scrollStep < 0) {
console.log("页面向上滚动了！");
} else {
console.log("页面向下滚动了！");
}
if (scrollTop <= 0) {
console.log("到了最顶部")
}
},
},
beforeDestroy() {
window.removeEventListener("scroll", this.scrolling);
},