1、是否滾動(dòng)到底部

isScrollBottom() { // 是否滾動(dòng)到了底部 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 }) // 隱藏直達(dá)最新消息按鈕 this.isBottom = true this.isTop = false } else { this.$store.dispatch(’setBottomBtn’, true, { root: true }) // 顯示直達(dá)最新消息按鈕 this.isTop = false this.isBottom = false if (scrollTop == 0) { this.isTop = true } } },

2、scroll滾動(dòng)方向判斷

getDirection() { // scroll滾動(dòng)方向~~~~ 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、滾動(dòng)節(jié)流

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

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

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

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

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

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存儲(chǔ)到isSeeDomArr } } if (isSeeDomArr.length) { // 非 ceo接診臺(tái)更新消息的已讀狀態(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) } } } // 更新聊天對(duì)應(yīng)的咨詢軌跡 this.setCurrentFdAsk( isSeeDomArr[isSeeDomArr.length - 1].getAttribute(’fdAsk’) ) } },

the end：滾動(dòng)加載這些判斷前前后后改了好多次，這次終于感覺邏輯比較清晰了，也算對(duì)自己有個(gè)交代。。。

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