vue實(shí)現(xiàn)錨點(diǎn)定位功能的方法

這篇文章主要講解了“vue實(shí)現(xiàn)錨點(diǎn)定位功能的方法”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“vue實(shí)現(xiàn)錨點(diǎn)定位功能的方法”吧！

本文實(shí)例為大家分享了vue實(shí)現(xiàn)錨點(diǎn)定位的具體代碼，供大家參考，具體內(nèi)容如下

這里主要是實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的滾動(dòng)觸發(fā)錨點(diǎn)高亮，以及點(diǎn)擊錨點(diǎn)觸發(fā)滾動(dòng)的功能
如果是獲取瀏覽器的滾動(dòng)高度，各個(gè)瀏覽器有所差異，使用以下幾種方式：

Chrome： document.body.scrollTop
Firefox： document.documentElement.scrollTop
Safari： window.pageYOffset

我這里是局部元素滾動(dòng)，因此稍有差異。先附上html及css代碼塊：

scroll-content為滾動(dòng)區(qū)域， operation-btn為控制錨點(diǎn)行為的按鈕。

<template>
  <div class="anchor-point">
    <!-- 滾動(dòng)區(qū)域 -->
    <div class="scroll-content" @scroll="onScroll">
      <div class="scroll-item" >一層</div>
      <div class="scroll-item" >二層</div>
      <div class="scroll-item" >三層</div>
      <div class="scroll-item" >四層</div>
    </div>
    <!-- 按鈕 -->
    <div class="operation-btn">
      <div v-for="(item, index) in ['一層','二層','三層','四層']" :key="index" @click="jump(index)"
           :>{{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>

通過(guò)監(jiān)聽(tīng)滾動(dòng)事件，高亮顯示錨點(diǎn)按鈕

這里是通過(guò)遍歷滾動(dòng)項(xiàng)，判斷滾動(dòng)條滾動(dòng)距離是否大于當(dāng)前項(xiàng)的可滾動(dòng)距離(即距離其offsetParent頂部的距離，這里是body)

// 滾動(dòng)觸發(fā)按鈕高亮
onScroll (e) {
  let scrollItems = document.querySelectorAll('.scroll-item')
  for (let i = scrollItems.length - 1; i >= 0; i--) {
    // 判斷滾動(dòng)條滾動(dòng)距離是否大于當(dāng)前滾動(dòng)項(xiàng)可滾動(dòng)距離
    let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop
    if (judge) {
      this.activeStep = i
      break
    }
  }
},

添加點(diǎn)擊事件，根據(jù)錨點(diǎn)滾動(dòng)至對(duì)應(yīng)區(qū)域并實(shí)現(xiàn)平滑滾動(dòng)

這里參考網(wǎng)上的方法，將滾動(dòng)距離細(xì)分為多個(gè)小段，并考慮向上及向下的的滾動(dòng)，實(shí)現(xiàn)滾動(dòng)的過(guò)渡動(dòng)畫(huà)。
本來(lái)是打算使用scrollIntoView實(shí)現(xiàn)滾動(dòng)動(dòng)畫(huà)，scrollIntoView在各個(gè)瀏覽器已經(jīng)有很好的支持性，但是ScrollIntoViewOptions在瀏覽器的兼容性上還有問(wèn)題，所以改用如下距離分割的方式。

// 點(diǎn)擊切換錨點(diǎn)
jump (index) {
 let target = document.querySelector('.scroll-content')
 let scrollItems = document.querySelectorAll('.scroll-item')
 // 判斷滾動(dòng)條是否滾動(dòng)到底部
 if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
   this.activeStep = index
 }
 let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop // 錨點(diǎn)元素距離其offsetParent(這里是body)頂部的距離(待滾動(dòng)的距離)
 let distance = document.querySelector('.scroll-content').scrollTop // 滾動(dòng)條距離滾動(dòng)區(qū)域頂部的距離
 // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滾動(dòng)條距離滾動(dòng)區(qū)域頂部的距離(滾動(dòng)區(qū)域?yàn)榇翱?
 // 滾動(dòng)動(dòng)畫(huà)實(shí)現(xiàn), 使用setTimeout的遞歸實(shí)現(xiàn)平滑滾動(dòng)，將距離細(xì)分為50小段，10ms滾動(dòng)一次
 // 計(jì)算每一小段的距離
 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'))
 }

 // 參數(shù)element為滾動(dòng)區(qū)域
 function smoothDown (element) {
   if (distance < total) {
     distance += step
     element.scrollTop = distance
     setTimeout(smoothDown.bind(this, element), 10)
   } else {
     element.scrollTop = total
   }
 }

 // 參數(shù)element為滾動(dòng)區(qū)域
 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'
 //     })
 //   }
 // })
}

此處附上效果圖：

感謝各位的閱讀，以上就是“vue實(shí)現(xiàn)錨點(diǎn)定位功能的方法”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)vue實(shí)現(xiàn)錨點(diǎn)定位功能的方法這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！