vue实现滚动监听到锚点,vue页面锚点定位
这篇文章主要为大家详细介绍了某视频剪辑软件模态框实现动态锚点，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件模态框实现动态锚点的具体代码，供大家参考，具体内容如下
参考：vue中实现锚点跳转及滚动监听的简便方法
效果图：
代码：
//html代码
模板
div id=应用程序
埃尔对话
class=abow_dialog
title=增加内容
:visible.sync=DialogVisible
宽度=80%
中心
div class=steps
保险商实验所
li v-for=(item，index) in title_list :key=index
span ref= spans :style= { color:active step===index？# 1987 E1 : # 000000 } @ click= jump(index)
I class= El-icon-thumb /I { { item .标题} }
/span
/李
/ul
/div
div class= result @ scroll= on scroll
滚动项目范围第一项项/span/div
滚动项目范围第二项项/span/div
滚动项目范围第三项项/span/div
滚动项目范围第四项项/span/div
滚动项目范围第五项项/span/div
滚动项目范围第六项项/span/div
/div
span slot=页脚 class=对话框-页脚text-align=右
El-button @ click=对话框可见=假取消/el-button
El-button type= primary @ click= dialog visible=false 确定/el-button
/span
/el-dialog
/div
/模板
//js代码
脚本
导出默认值{
名称： dialogandmaod ，
data() {
返回{
DialogVisible: true，//一般默认是假的，为了方便查看就设置成了真实的
activeStep :0，
标题_列表：[
{标题：第一项项},
{标题：第二项项},
{标题：第三项项},
{标题：第四项项},
{标题：第五项项},
{标题：第六项项},
]
}
},
方法：{
跳转（索引){
var items=文档。查询选择器全部(.滚动项目);
for(var I=0；一。物品长度；i ) {
if (index===i) {
项目[我].scrollIntoView({
块：开始，//默认跳转到顶部
行为："平滑"//滚动的速度
});
}
}
},
onScroll(e) {
让滚动项目=文档。查询选择器全部(.滚动项目);
对于(让I=滚动项目。长度-1；I=0；我- ) {
//判断滚动条滚动距离是否大于当前滚动项可滚动距离
让判断=
e。目标。scroll top=滚动项目[I].offsetTop - scrollItems[0].抵消
如果（法官){
这个。主动步=I；
打破；
}
}
}
}
}
/脚本
//css代码
样式lang=scss 。埃尔-对话框-中心100 . El-对话框_ _页脚{
文本对齐：右对齐！重要；
}。abow_dialog {
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
溢出：隐藏；el-dialog {
保证金：0自动！重要；
身高：90%;
溢出：隐藏；步骤{
背景色：# fff
max-height:calc(-16px 100 VH)；
位置：固定；
宽度：98px
顶配：90px
右：2%;
ul {
列表样式：无；
左填充：5px
边距：12px 0；
}
李{
边距：7px 5px
跨度{
光标：指针；
：悬停{
颜色：#88bcec！重要；
}
我{
右边距：5px
}
}
}
}。结果{
位置：绝对；
左：10px
top:54px；
底部：70px
右：0;
填充：0;
溢出-y:滚动；滚动项目{
宽度：100%;
高度：500像素
边距-顶部：20px
背景：rgb(137，238，238)；
跨度{
字体大小：20px
}
：第一个孩子{
边距-顶部：0;
}
：最后一个孩子{
高度：500像素
}
}
}。埃尔-对话框_ _页脚{
位置：绝对；
左：0;
右：0;
底部：0;
}
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。