监听页面触底,触顶,滚动条事件

https://blog.csdn.net/Jack_zengzhen/article/details/79013841

• offset
  带边框
• clint
  不带边框,边框以内时间内容
• document.body.scrollTop
  谷歌:滚动条距离顶部的距离
• document.documentElement.scrollTop
  IE:滚动条距离顶部的距离
• window.screen.height
  电脑屏的高度
• document.body.scrollHeight
  谷歌&IE: 浏览器所有内容的高度
• document.documentElement.clientHeight
  谷歌&IE: 可视区的高度

监听触底

必须将方法绑在this上否则无法移除

mounted() {
    window.addEventListener('scroll', this.listenerScroll)
  },
beforeDestroy() {
    window.removeEventListener('scroll', this.listenerScroll)
  },
methods:{
  listenerScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      let bodyHeight = document.body.scrollHeight
      let clientHeight = document.documentElement.clientHeight
      if (clientHeight + scrollTop >= bodyHeight) {
        console.log('到底了')
      } else if (scrollTop <= 0) {
        console.log('到顶了')
      }
    },
  }