vue中scroll滚动判断，包括：是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素等

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

vue scroll滚动判断，包括：是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素等

1、是否滚动到底部判断，常常用来加载数据

 isScrollBottom() {
      // 是否滚动到了底部
      this.box = this.$refs.chatListWrapper
      var clientHeight = this.box.clientHeight
      var scrollTop = this.box.scrollTop
      var scrollHeight = this.box.scrollHeight
      if (scrollTop + clientHeight == scrollHeight) {
        this.$store.dispatch('setBottomBtn', false, { root: true }) // 隐藏直达最新消息按钮
        this.isBottom = true
        this.isTop = false
      } else {
        this.$store.dispatch('setBottomBtn', true, { root: true }) // 显示直达最新消息按钮
        this.isTop = false
        this.isBottom = false
        if (scrollTop == 0) {
          this.isTop = true
        }
      }
    },

2、scroll滚动方向判断，判断滚动的方向是向上还是向下，从而做出相应的请求

    getDirection() {
      // scroll滚动方向~~~~
      this.box = this.$refs.chatListWrapper
      var scrollTop = this.box.scrollTop
      var scroll = scrollTop - this.initTop
      this.initTop = scrollTop
      let dir = 'down'
      if (scroll < 0) {
        dir = 'up'
      } else {
        dir = 'down'
      }
      return dir
    },

3、滚动节流，滚动时一次滚动往往会触发多次的请求，如果不节流，将会大大浪费请求带宽，因此节流必不可少。

1）、在滚动的dom上绑定scroll事件，监听滚动 2）、data中定义：fnScroll: () => {}, 初始值
3）、mounted中给fnScroll函数赋值，_.throttle实现滚动节流

this.fnScroll = _.throttle(() => {
}, 500)

4、获取滚动可视区域内dom（滚动的内容区域常常有很多内容，而我们常常需要的仅仅只是出现在可视区域的部分内容，如：设置已读未读功能就可以用到）

实现注意：判断当前元素是否在可视区域内，若在则存到isSeeDomArr中，然后循环isSeeDomArr数组，拿到当前可视区域内的最后一个dom,再去判断是否更新对应的咨询轨迹。
不要滚动时就去更新，这样会造成不停请求更新，最后一次请求可能无效，造成数据的错乱

    sendRead() {
      const chatLi = document
        .getElementById('chat_list_wrapper')
        .getElementsByTagName('li')
      var container = this.$refs.chatListWrapper
      var swHeight = container.clientHeight
      const scrollTop = container.scrollTop
      const aa = swHeight + scrollTop
      let isSeeDomArr = []
      for (let j = 0; j < chatLi.length; j++) {
        if (scrollTop < chatLi[j].offsetTop && chatLi[j].offsetTop < aa) {
          isSeeDomArr.push(chatLi[j]) //将可视区域内所有dom存储到isSeeDomArr
        }
      }
      if (isSeeDomArr.length) {
        // 非 ceo接诊台更新消息的已读状态
        if (this.$route.path.indexOf('diagnose/ceo') === -1) {
          for (let m = 0; m < isSeeDomArr.length; m++) {
            const isSelfSend = isSeeDomArr[m].getAttribute('isSelfSend')
            const msgStatus = isSeeDomArr[m].getAttribute('msgStatus')
            const msgType = isSeeDomArr[m].getAttribute('msgType')
            if (!isSelfSend && !msgStatus && msgType !== 'notice') {
              const _id = isSeeDomArr[m].getAttribute('id')
              this.sendReadApi(_id)
            }
          }
        }
        // 更新聊天对应的咨询轨迹
        this.setCurrentFdAsk(
          isSeeDomArr[isSeeDomArr.length - 1].getAttribute('fdAsk')
        )
      }
    },

the end：滚动加载这些判断前前后后改了好多次，这次终于感觉逻辑比较清晰了，也算对自己有个交代。。。