vue 닻 점 포 지 셔 닝 기능 실현

본 논문 의 사례 는 vue 가 닻 점 의 포 지 셔 닝 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
여 기 는 주로 간단 한 스크롤 이 닻 점 의 하 이 라 이 트 를 촉발 하고 닻 점 을 클릭 하여 스크롤 을 촉발 하 는 기능 을 실현 하 였 다.
브 라 우 저의 스크롤 높이 를 가 져 오 는 경우 브 라 우 저 마다 차이 가 있 으 므 로 다음 과 같은 몇 가지 방법 을 사용 하 십시오.
Chrome： document.body.scrollTop
Firefox： document.documentElement.scrollTop
Safari： window.pageYOffset
내 가 있 는 이곳 은 국부 원소 가 굴 러 가기 때문에 약간의 차이 가 있다.html 및 css 코드 블록 먼저 첨부:
scroll-content 는 스크롤 영역 이 고 operation-btn 은 닻 점 의 행동 을 제어 하 는 단추 입 니 다.

<template>
  <div class="anchor-point">
    <!--      -->
    <div class="scroll-content" @scroll="onScroll">
      <div class="scroll-item" style="height: 500px;background: #3a8ee6;">  </div>
      <div class="scroll-item" style="height: 500px;background: red;">  </div>
      <div class="scroll-item" style="height: 500px;background: #42b983">  </div>
      <div class="scroll-item" style="height: 1000px;background: yellow;">  </div>
    </div>
    <!--    -->
    <div class="operation-btn">
      <div v-for="(item, index) in ['  ','  ','  ','  ']" :key="index" @click="jump(index)"
           :style="{background: activeStep === index ? '#eeeeee' : '#ffffff'}">{{item}}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .anchor-point {
    flex-basis: 100%;
    display: flex;
    overflow: hidden;
    .scroll-content {
      height: 100%;
      width: 90%;
      overflow: scroll;
    }
    .operation-btn {
      width: 10%;
      height: 100%;
    }
  }
</style>

스크롤 이벤트 감청 을 통 해 닻 버튼 을 강조 합 니 다.
스크롤 항목 을 옮 겨 다 니 며 스크롤 바 의 스크롤 거리 가 현재 항목 의 스크롤 가능 거리 보다 큰 지 판단 합 니 다.(즉,offset Parent 상단 의 거리 입 니 다.여 기 는 body 입 니 다)

//         
onScroll (e) {
  let scrollItems = document.querySelectorAll('.scroll-item')
  for (let i = scrollItems.length - 1; i >= 0; i--) {
    //                        
    let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop
    if (judge) {
      this.activeStep = i
      break
    }
  }
},

클릭 이 벤트 를 추가 하여 닻 점 에 따라 해당 구역 으로 스크롤 하고 부 드 러 운 스크롤 을 실현 합 니 다.
여기 서 인터넷 의 방법 을 참고 하여 스크롤 거 리 를 여러 개의 작은 부분 으로 나 누고 위로,아래로 스크롤 하 는 것 을 고려 하여 스크롤 하 는 과도 애니메이션 을 실현 합 니 다.
스크롤 IntoView 를 사용 하여 스크롤 애니메이션 을 구현 하려 고 했 는데 스크롤 IntoView 는 각 브 라 우 저 에서 이미 좋 은 지원 을 받 고 있 지만 스크롤 IntoView Options 는 브 라 우 저의 호환성 에 문제 가 있 기 때문에 다음 과 같은 거리 분할 방식 으로 바 꾸 었 습 니 다.

//       
jump (index) {
 let target = document.querySelector('.scroll-content')
 let scrollItems = document.querySelectorAll('.scroll-item')
 //             
 if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
   this.activeStep = index
 }
 let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop //        offsetParent(   body)     (      )
 let distance = document.querySelector('.scroll-content').scrollTop //               
 // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset //               (       )
 //       ,   setTimeout         ，      50  ，10ms    
 //          
 let step = total / 50
 if (total > distance) {
   smoothDown(document.querySelector('.scroll-content'))
 } else {
   let newTotal = distance - total
   step = newTotal / 50
   smoothUp(document.querySelector('.scroll-content'))
 }

 //   element     
 function smoothDown (element) {
   if (distance < total) {
     distance += step
     element.scrollTop = distance
     setTimeout(smoothDown.bind(this, element), 10)
   } else {
     element.scrollTop = total
   }
 }

 //   element     
 function smoothUp (element) {
   if (distance > total) {
     distance -= step
     element.scrollTop = distance
     setTimeout(smoothUp.bind(this, element), 10)
   } else {
     element.scrollTop = total
   }
 }

 // document.querySelectorAll('.scroll-item').forEach((item, index1) => {
 //   if (index === index1) {
 //     item.scrollIntoView({
 //       block: 'start',
 //       behavior: 'smooth'
 //     })
 //   }
 // })
}

여기에 효과 도 를 붙 입 니 다:

처음으로 닻 점 의 포 지 셔 닝 과 높 은 닻 점 을 굴 리 는 효 과 를 실현 하 는데 약간 부족 합 니 다.무슨 문제 가 있 거나 건의 가 있 으 면 많이 지적 해 주 십시오.
여기 서 주 셔 서 감사합니다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.