vue监听界面滚动高度

在methods写一个函数

ChangeOpacity() {
      // 获取滚动像素
      const scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop
      // 获取屏幕高度
      const vmHeight = window.innerHeight
      // 修改opacity值
      this.opacity = Math.abs(Math.round(scrollTop)) / vmHeight
      // 修改style
      this.style = {
        'background-color': 'rgba(255,255,255,' + this.opacity + ')',
      }
    },

在mounted写注册监听

mounted() {
    window.addEventListener('scroll', this.ChangeOpacity)
  },

完整代码 这样子就可以滚动修改hader的透明度

 <div class="header" :style="style"></div>

 data() {
    return {

      style: {},
      opacity: 0,
           }
},
methods:{
      ChangeOpacity() {
      // 获取滚动像素
      const scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop
      // 获取屏幕高度
      const vmHeight = window.innerHeight
      // 修改opacity值
      this.opacity = Math.abs(Math.round(scrollTop)) / vmHeight
      // 修改style
      this.style = {
        'background-color': 'rgba(255,255,255,' + this.opacity + ')',
      }
    },
},
 mounted() {
    window.addEventListener('scroll', this.ChangeOpacity)
  },