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：滚动加载这些判断前前后后改了好多次，这次终于感觉逻辑比较清晰了，也算对自己有个交代。。。
到此这篇关于vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)的文章就介绍到这了,更多相关vue scroll滚动判断内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: