页面滚动事件scroll

页面滚动事件

//在mounted钩子函数里面注册scroll事件
mounted() {
    this.$router.afterEach((to, from, next) => {
      window.scrollTo(0, 0);
    });
    window.addEventListener("scroll", this.about);
  },


methods: {
    about: function() {
      $(window).scroll(function() {
        //判断元素到达当前窗口的什么位置（简介）
        var isok = true;
        //获取元素到浏览器顶端的距离
        let wordcontent = document.getElementsByClassName("wordcontent")[0].offsetTop;
        //获取页面滚动的距离
        let t = document.documentElement.scrollTop || document.body.scrollTop;
        //获取窗口的高度
        let h = document.documentElement.clientHeight;
        let isshow = wordcontent - t - h;
        if (isshow < -100 && isok) {
          $(".wordcontent")
            .css("margin-top", "0")
            .css("opacity", "0.8");
          isok = false;
        }
        //判断元素到达当前窗口的什么位置（简介）
        let isup = true;
        let titlediv = document.getElementsByClassName("titlediv")[0].offsetTop;
        let istitledivshow = titlediv - t - h;
        if (istitledivshow < -100 && isup) {
          $(".titlediv")
            .css("margin-top", "0")
            .css("opacity", "1");
          isup = false;
        }
        //判断元素到达当前窗口的什么位置（四图）
        let isfour = true;
        let four = document.getElementsByClassName("four")[0].offsetTop;
        let fourimg = four - t - h;
        if (fourimg < -100 && isok) {
          $(".four")
            .css("margin-top", "0")
            .css("opacity", "1");
          isfour = false;
        }
        //判断元素到达当前窗口的什么位置（合作伙伴）
        let isand = true;
        let andtitle = document.getElementsByClassName("andtitle")[0].offsetTop;
        let and = andtitle - t - h;
        console.log(fourimg);
        if (and < -100 && isand) {
          $(".andtitle")
            .css("margin-top", "0")
            .css("opacity", "1");
          isand = false;
        }
      });
    }
  },


//注销页面中的scroll
  beforeDestroy() {
    window.removeEventListener("scroll", this.about);
  }

vue的页面跳转还会有上一个页面的scroll事件的影响，要在页面注销之前在beforeDestroy钩子函数里面注销掉scroll事件，每个页面原则上是只能有一个scroll事件