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.스크롤 스크롤 방향 판단

  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 요 소 를 가 져 올 지)에 관 한 글 을 소개 합 니 다.