監聽滾動條事件

今天遇到需要監聽滾動條事件的問題，本來以為是一個簡單的監聽就好了，哪成想，這么多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 來代替嘍。我也不知道這么理解對不對，希望各位大佬，可以幫忙給解釋一下。謝謝！！！