代码
...省略...
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("header 滚动距离 ", scrollTop);
// 更新——滚动前，滚动条距文档顶部的距离
this.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 到了最顶部")
}
},
},
beforeDestroy() {
window.removeEventListener("scroll", this.scrolling);
},
...省略 ...
效果
文章来源：https://www.toymoban.com/news/detail-672936.html
文章来源地址https://www.toymoban.com/news/detail-672936.html
到了这里，关于vue监听滚动条事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
