监听滚动条事件

Posted 2021-03-24 qinyuanchun

今天遇到需要监听滚动条事件的问题，本来以为是一个简单的监听就好了，哪成想，这么多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 来代替喽。我也不知道这么理解对不对，希望各位大佬，可以帮忙给解释一下。谢谢！！！