这篇文章主要为大家详细介绍了vue实现锚点定位功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现锚点定位的具体代码，供大家参考，具体内容如下
这里主要是实现了一个简单的滚动触发锚点高亮，以及点击锚点触发滚动的功能
如果是获取浏览器的滚动高度，各个浏览器有所差异，使用以下几种方式：
Chrome： document.body.scrollTop
Firefox： document.documentElement.scrollTop
Safari： window.pageYOffset
我这里是局部元素滚动，因此稍有差异。先附上html及css代码块：
scroll-content为滚动区域， operation-btn为控制锚点行为的按钮。
<div class="anchor-point"> <!-- 滚动区域 --><div class="scroll-content"> <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>{{item}} </div></div></div> .anchor-point { flex-basis: 100%; display: flex; overflow: hidden; .scroll-content { height: 100%; width: 90%; overflow: scroll; } .operation-btn { width: 10%; height: 100%; } }
通过监听滚动事件，高亮显示锚点按钮
这里是通过遍历滚动项，判断滚动条滚动距离是否大于当前项的可滚动距离(即距离其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 scrollItem<div style="color:transparent">本文来源gaodai^.ma#com搞#代!码网</div>s = document.querySelectorAll('.scroll-item') // 判断滚动条是否滚动到底部 if (target.scrollHeight 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(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' // }) // } // }) }
此处附上效果图：
第一次实现锚点定位及滚动高亮锚点的效果，略有不足，有什么问题或建议请多多指正。
这里非常感谢这篇文章带来的启发，又get一个新知识点。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是vue实现锚点定位功能的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：vue实现锚点定位功能
