vue滚动锚点,
这篇文章主要为大家详细介绍了某视频剪辑软件元素用户界面实现锚点定位，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件元素用户界面实现锚点定位的具体代码，供大家参考，具体内容如下
vue
el-row :gutter=20
el-col :span=3
！-导航选择事件-
El-menu:default-active=活动步骤 @ select=跳转
el-menu-item v-for=(item，index)in menu data :index= ` $ { index } ` :key= item。“主题id”
i class=el-icon-menu/i
span slot= title"{ item。主题名称} }/span
/El-菜单项
/el-menu
/el-col
！-绑定卷起事件需要监听-
El-col:span= 21 class= scroll _ cls @ scroll= on scroll
div v-for=(item，index)in table object :key= index style= height:500 px
title scroll-item :id= item。名称“{项目。name } }/div
El表：data= item。“rows”:key=“index”
埃尔-表格-列标签=序号type= index width= 50 /El-表格-列
El-table-column prop= channelId label=渠道/团队id /El-表格-列
El-table-column prop= channel name label=渠道/团队/El-表格-列
El-表格-列属性=ruleCode 标签=分配方案id /El-表格-列
El-table-column prop=规则名称 label=分配方案名称/El-表格-列
El-table-column prop=规则版本 label=版本号/El-表格-列
埃尔-表-列属性=层次结构标签=级别
模板槽-范围="范围"
span{{scope.row.hierarchy==1？项目 : 渠道团队} span
/模板
/El-表格-列
埃尔-表格-列标签=有效期
模板槽-范围="范围"
span { { scope。划。开始时间-范围。划。结束时间} }/span
/模板
/El-表格-列
El-table-column prop= creator name label=操作人/El-表格-列
El-table-column prop= create time label=操作时间/El-表格-列
El-table-column prop= order CNT label=关联订单
模板槽-范围="范围"
埃尔按钮
@ click= orderHandleClick(范围。划。订单计数)
type=text
大小=小
{ {范围。划。订单计数} }/El-button
/模板
/El-表格-列
埃尔-表格-列标签=操作
模板槽-范围="范围"
El-button @ click= settingHandleClick(范围。row) type= text size= small 设置分配方案/el-button
/模板
/El-表格-列
/el-table
埃尔分页
v-if=item.total 5
style=margin-top: 15px
大小=小
@ size-change= handleSizeChange($ event，index)
@ current-change= handleCurrentChange($ event，index)
:current-page=ruleForm.ageNum
:page-size=[10，30，50，100]
:page-size=ruleForm.pageSize
布局=总计，大小，上一页，翻页，下一页
:total=item.total
/El-分页
/div
/el-col
/el-row
js
//滚动触发按钮高亮
方法：{
onScroll(e) {
让滚动项目=文档。查询选择器全部(.滚动项目);
console.log(scrollItems)
console.log(e)
对于(让I=滚动项目。长度-1；I=0；我- ) {
//判断滚动条滚动距离是否大于当前滚动项可滚动距离
让判断=
e.target.scrollTop=
scrollItems[i].offsetTop - scrollItems[0].抵消
如果（法官){
console.log(i)
这个。active step=I . tostring()；
打破；
}
}
},
跳转（索引){
console.log(索引)
让目标=文档。查询选择器(.scroll _ cls’)；
让滚动项目=文档。查询选择器全部(.滚动项目);
//判断滚动条是否滚动到底部
如果(目标。滚动高度=目标。滚动顶部目标。客户身高){
console.log(索引)
console.log(索引类型)
this.activeStep=index
}
设total=scrollItems[index].offsetTop - scrollItems[0].offsetTop//锚点元素距离其offsetParent(这里是正文)顶部的距离（待滚动的距离)
console.log(总计)
设距离=文档。查询选择器(.scroll _ cls’).scrollTop//滚动条距离滚动区域顶部的距离
console.log(距离)
//让距离=文档。身体。向上滚动 文档。文档元素。滚动顶部 窗口。页面偏移//滚动条距离滚动区域顶部的距离（滚动区域为窗口)
//滚动动画实现，使用定时器的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次
//计算每一小段的距离
设步长=总数/50;
如果（总距离){
平滑(文档。查询选择器(.scroll _ cls ))；
}否则{
设新总数=距离-总数；
step=新合计/50；
平滑(文档。查询选择器(.scroll _ cls ))；
}
//参数元素为滚动区域
函数平滑(元素){
如果（总距离){
距离=步；
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({
阻止："开始",
行为："平滑"
})
}
})
},
},
已安装(){
这个. nextTick(()={
console.log(1)
窗户。addevent侦听器( scroll ，this.onScroll，true)
})
},
css。scroll_cls {
高度：500像素
溢出：自动；
}
转载自：原文链接点击这里
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。