vue 锚点,vue添加定位功能
本文主要详细介绍vue的锚点定位功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
在本文中，我们分享了vue锚位置的具体代码，供大家参考。具体内容如下。
这里实现了一个简单的滚动触发锚点高亮，点击锚点触发滚动的功能。
如果要获得浏览器的滚动高度(因浏览器而异)，请使用以下方法：
chrome:document.body.scrollTopFirefox:document.documentElement.scrollTopSafari:window.pageYOffset
我这里是滚本地元素，所以略有不同。首先附加html和css代码块：
Scroll-content是滚动区，operation-btn是控制锚点行为的按钮。
模板
div class=锚点
！-滚动区-
scroll-content @ scroll= on scroll
div class= scroll-item style= height:500 px；背景：# 3a8ee6一级/分区
div class= scroll-item style= height:500 px；背景：红色；二级/部门
div class= scroll-item style= height:500 px；背景：#42b983 第三层/分区
div class= scroll-item style= height:1000 px；背景：黄色；第4层/分区
/div
！按钮
div class=操作-btn
[一楼，二楼，三楼，四楼]中的Div-for= (item，index):key= index @ click= jump(index)
:style= { background:active step===index？#eeeeee : #ffffff}{{item}}
/div
/div
/div
/模板
style lang=scss 范围。锚点{
弹性基础：100%；
显示器：flex
溢出：隐藏；滚动内容{
身高：100%；
宽度：90%；
溢出：滚动；
}。操作-btn {
宽度：10%；
身高：100%；
}
}
/风格
通过监听滚动事件，高亮显示锚点按钮
这是通过遍历滚动项来确定滚动条的滚动距离是否大于当前项的可滚动距离(即距其offsetParent顶部的距离，这里是主体)。
//滚动触发器按钮突出显示
onScroll (e) {
let scroll items=document . query selector all(。滚动项目’)
for(让I=scroll items . length-1；I=0；我- ) {
//判断滚动条的滚动距离是否大于当前滚动项的可滚动距离。
let judge=e . target . scroll top=scroll items[I]。offsetTop - scrollItems[0]。抵消
如果(法官){
this.activeStep=i
破裂
}
}
},
添加点击事件，根据锚点滚动至对应区域并实现平滑滚动
这里参考线上的方法，将滚动距离细分为几段，考虑向上和向下的滚动，实现滚动的过渡动画。
本来是想用scrollIntoView实现滚动动画的。scrollIntoView在各种浏览器中已经有了很好的支持，但是ScrollIntoViewOptions在浏览器兼容性上还存在问题，所以改用下面的距离划分方法。
//点击切换锚点。
跳转(索引){
let target=document . query selector(。滚动内容’)
let scroll items=document . query selector all(。滚动项目’)
//确定滚动条是否滚动到底部。
if(target . scroll height=target . scroll top target . client height){
this.activeStep=index
}
Let=scrollitems [index]。offsettop-scrollitems [0]。offsettop//定位元素距其offsetParent(这里是主体)顶部的距离(要滚动的距离)
let distance=document . query selector(。滚动内容)。scroll top//滚动条到滚动区顶部的距离
//let distance=document . body . scroll top document . documentelement . scroll top window.pageyoffset//The滚动条和滚动区(滚动区是一个窗口)顶部之间的距离
//滚动动画，利用setTimeout的递归实现平滑滚动，将距离细分为50段，10ms滚动一次。
//计算每个小段的距离
假设步长=总计/50
如果(总距离){
smooth down(document . query selector(。滚动-内容))
}否则{
让newTotal=距离-总计
步骤=新总计/50
smooth up(document . query selector(。滚动-内容))
}
//参数元素是滚动区
函数平滑(元素){
如果（总距离){
距离=步
element.scrollTop=距离
setTimeout(平滑。bind(this，element)，10)
}否则{
element.scrollTop=total
}
}
//参数元素为滚动区域
函数平滑（元素){
如果（总距离){
距离=步长
element.scrollTop=距离
setTimeout(smoothUp.bind(this，element)，10)
}否则{
element.scrollTop=total
}
}
//document.querySelectorAll( .滚动项目)。forEach((item，index1)={
//if (index===index1) {
//item.scrollIntoView({
//block: start ，
//行为："平滑"
//})
//}
//})
}
此处附上效果图：
第一次实现锚点定位及滚动高亮锚点的效果，略有不足，有什么问题或建议请多多指正。
这里非常感谢这篇文章带来的启发，又得到一个新知识点。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。