js实现web端监听页面滚动切换当前tab

开发背景：Vue项目

实现代码：

  mounted () {
    // 添加页面滚动监听事件
    window.addEventListener('scroll', this.srcollHandler, true)
  },
  
  destroyed () {
    // 记得移除监听事件
    window.removeEventListener("scroll", this.srcollHandler, true)
  }

  methods: {
    // 监听页面滚动，设置当前tab
    srcollHandler () {
      // console.log(216, event.target.documentElement.scrollTop)
      const headerHeight = document.querySelector('.page-header').clientHeight
      const a = document.getElementById('notice').getBoundingClientRect().top - headerHeight // 政策兑现通知公告
      const b = document.getElementById('publicity').getBoundingClientRect().top - headerHeight // 结果公示
      const c = document.getElementById('professional').getBoundingClientRect().top - headerHeight // 职业动态
      const d = document.getElementById('industry').getBoundingClientRect().top - headerHeight // 产业扶持政策
      const e = document.getElementById('news').getBoundingClientRect().top - headerHeight // 新闻资讯
      // console.log('a', a, 'b', b, 'c', c, 'd', d, 'e', e)
      if (a <= 0 && b > 0) this.currentTab = 'notice'
      else if (b <= 0 && c > 0) this.currentTab = 'publicity'
      else if (c <= 0 && d > 0) this.currentTab = 'professional'
      else if (d <= 0 && e > 0) this.currentTab = 'industry'
      else if (e <= 0) this.currentTab = 'news'
      else if (a > 0) this.currentTab = 'notice'
    }
  }

记录于2022-3-2