位置：首页-资讯-后端开发

vue实现锚点定位功能的方法

2023-06-20 12:20

短信预约 -IT技能 免费直播动态提醒

这篇文章主要讲解了“vue实现锚点定位功能的方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“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" >一层</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>

通过监听滚动事件，高亮显示锚点按钮

这里是通过遍历滚动项，判断滚动条滚动距离是否大于当前项的可滚动距离(即距离其offsetParent顶部的距离，这里是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    }  }},

添加点击事件，根据锚点滚动至对应区域并实现平滑滚动

这里参考网上的方法，将滚动距离细分为多个小段，并考虑向上及向下的的滚动，实现滚动的过渡动画。
本来是打算使用scrollIntoView实现滚动动画，scrollIntoView在各个浏览器已经有很好的支持性，但是ScrollIntoViewOptions在浏览器的兼容性上还有问题，所以改用如下距离分割的方式。

// 点击切换锚点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' //     }) //   } // })}

此处附上效果图：

vue实现锚点定位功能的方法