This is the first day of my participation in the August Text Challenge.More challenges in August

Vue Scroll determines whether to scroll to the bottom, scroll direction, scroll restrictor, and obtain dom elements in the scroll area

1. Whether to scroll to the bottom is often used to load data

IsScrollBottom () {this.box = this.$refs.chatListWrapper var clientHeight = this.box scrollTop = this.box.scrollTop var scrollHeight = this.box.scrollHeight if (scrollTop + clientHeight == scrollHeight) { this.$store.dispatch('setBottomBtn', false, { root: IsBottom = true this.isTop = false} else {this.$store. Dispatch ('setBottomBtn', true, This. isTop = false this.isBottom = false if (scrollTop == 0) {this.isTop = true}},Copy the code

2, determine the scrolling direction, determine whether the scrolling direction is up or down, and make a corresponding request

$refs.chatListWrapper var scrollTop = this.box. ScrollTop var scroll = this.box  scrollTop - this.initTop this.initTop = scrollTop let dir = 'down' if (scroll < 0) { dir = 'up' } else { dir = 'down' }  return dir },Copy the code

3, rolling throttling, rolling a rolling will often trigger multiple requests, if not throttling, will greatly waste the request bandwidth, so throttling is essential.

/ / fnScroll: () => {} / / mounted / / throttle / / fnScroll: () => {

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

4. Obtain the DOM in the scrolling visual area (scrolling content area often has a lot of content, and we often need only part of the content that appears in the visual area, such as: set the read and unread function can be used)

Implementation note: check whether the current element is in the visible area, if so, save to isSeeDomArr, then loop isSeeDomArr array, get the last DOM in the current visible area, then check whether to update the corresponding advisory track. Do not scroll to update, this will cause repeated requests for updates, the last request may not be valid, resulting in data confusion

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]) // Store all dom in the visible area to isSeeDomArr}} if (isSEEDomarr.length) {// Read status of the non-CEO desk update message 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)}}} // Update the advisory trace corresponding to the chat this.setCurrentFdAsk( isSeeDomArr[isSeeDomArr.length - 1].getAttribute('fdAsk') ) } },Copy the code

These judgments have been changed many times, and this time I finally feel logical and clear, and also have an explanation for myself…