vue监听滚动事件

vue监听页面滚动事件

window.pageXOffset window.pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。

<script>
export default {
  data () {
    return {
      // 滚动条的高度
      scrollTop: 0
    }
  },

  methods: {
    // 保存滚动值，这是兼容的写法
    handleScroll () {
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //变量windowHeight是可视区的高度
      var scrollHeight =document.documentElement.scrollHeight || document.body.scrollHeight;
          //滚动条到底部的条件
       if(scrollTop + windowHeight == scrollHeight){
            //你要触发的方法
        }
    },

    // 滚动条回到顶部
    backTop () {
      if (this.scrollTop > 10) {
        document.documentElement.scrollTop = 0
      }
    }
  },

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

  destroyed () {
    // 离开该页面需要移除这个监听的事件，不然会报错
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>