vue项目中实时监测浏览器滚动条的高度

1、在mounted生命周期函数注册滚动条事件

 

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

2、在methods方法里使用

 

methods: {
  windowScroll() {
     // 滚动条距离页面顶部的距离
     // 以下写法原生兼容
     let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      console.log(scrollTop);
  }
}

3、实例销毁之前，解绑事件

 

  beforeDestroy() {
      window.removeEventListener('scroll', this.windowScroll)
  }