标签：and java eve 今天 基本 基础 listen 现在 滚动事件
今天遇到需要监听滚动条事件的问题，本来以为是一个简单的监听就好了，哪成想，这么多bug，说到底还是自己基础不扎实，所以趁现在下班没事把它记录下来。以备后续所需，哈哈。
（1）首先是最基本的监听事件
methods: {
handleScroll() {
const top =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop; //兼容不同的浏览器
console.log(top);
if (top > 100) {
//
console.log("大于");
}
}
},
mounted() {
window.addEventListener("scroll", this.handleScroll); //监听滚动事件
}
（2）但是！他就是不出来呢，一开始咱也不知道啊，后来又是百度又是查资料的，说是监听时需要三个参数于是》》》
mounted() {
window.addEventListener("scroll", this.handleScroll, true);
} //后面的 true 则是第三个参数
然后就可以出来了（下图便是）
（3）然后！重点来了，因为做的是手机端吗，为了他的滚动流畅度，于是就给页面最大的容器加了“overflow: scroll” ,咦~ 又不出来了，这个愁毁我了，然后又是一通找资料，于是就解决了，哈哈
methods: {
handleScroll(e) {
const top = e.target.scrollTop;
if (top > 100) {
this.flag = false;
} else {
this.flag = true;
}
}
},
mounted() {
window.addEventListener("scroll", this.handleScroll, true);
},
destroyed() {
window.removeEventListener("scroll", this.windowScroll, true);
} //关闭页面时需要移除监听事件
至于，为什么这么写，我的想法是，因为这个是在单独的一个组件中，所以没有办法获取滚动条，但是当他的根元素e 传给他之后，就用e 来代替喽。我也不知道这么理解对不对，希望各位大佬，可以帮忙给解释一下。谢谢！！！
标签：and java eve 今天 基本 基础 listen 现在 滚动事件
原文地址：https://www.cnblogs.com/qinyuanchun/p/11938668.html
