监听滚动条事件

今天遇到需要监听滚动条事件的问题，本来以为是一个简单的监听就好了，哪成想，这么多bug，说到底还是自己基础不扎实，所以趁现在下班没事把它记录下来。以备后续所需，哈哈。

（1）首先是最基本的监听事件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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）但是！他就是不出来呢，一开始咱也不知道啊，后来又是百度又是查资料的，说是监听时需要三个参数于是》》》

 

?

1 2 3

mounted() {     window.addEventListener("scroll", this.handleScroll, true);   } //后面的 true 则是第三个参数

　然后就可以出来了（下图便是）

 

 （3）然后！重点来了，因为做的是手机端吗，为了他的滚动流畅度，于是就给页面最大的容器加了“overflow: scroll” ,咦~ 又不出来了，这个愁毁我了，然后又是一通找资料，于是就解决了，哈哈

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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 来代替喽。我也不知道这么理解对不对，希望各位大佬，可以帮忙给解释一下。谢谢！！！