vue scroll滾動判斷的實現(xiàn)(是否滾動到底部、滾動方向、滾動節(jié)流、獲取滾動區(qū)域dom元素)

更新時間：2020年06月11日 11:09:05 作者：云胡不喜

這篇文章主要介紹了vue scroll滾動判斷的實現(xiàn)(是否滾動到底部、滾動方向、滾動節(jié)流、獲取滾動區(qū)域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、滾動節(jié)流

1）、在滾動的dom上綁定scroll事件，監(jiān)聽滾動

2）、data中定義：fnScroll: () => {}, 初始值
3）、mounted中給fnScroll函數(shù)賦值，_.throttle實現(xiàn)滾動節(jié)流

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

4、獲取滾動可視區(qū)域內(nèi)dom：

實現(xiàn)注意：判斷當前元素是否在可視區(qū)域內(nèi)，若在則存到isSeeDomArr中，然后循環(huán)isSeeDomArr數(shù)組，拿到當前可視區(qū)域內(nèi)的最后一個dom,再去判斷是否更新對應的咨詢軌跡。
不要滾動時就去更新，這樣會造成不停請求更新，最后一次請求可能無效，造成數(shù)據(jù)的錯亂

  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]) //將可視區(qū)域內(nèi)所有dom存儲到isSeeDomArr
    }
   }
   if (isSeeDomArr.length) {
    // 非 ceo接診臺更新消息的已讀狀態(tài)
    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：滾動加載這些判斷前前后后改了好多次，這次終于感覺邏輯比較清晰了，也算對自己有個交代。。。

到此這篇關(guān)于vue scroll滾動判斷的實現(xiàn)(是否滾動到底部、滾動方向、滾動節(jié)流、獲取滾動區(qū)域dom元素)的文章就介紹到這了,更多相關(guān)vue scroll滾動判斷內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: