vue中锚点跳转,vue监听页面滚动
这篇文章主要为大家详细介绍了某视频剪辑软件实现锚点跳转及滚动监听的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
某视频剪辑软件中实现锚点跳转以及滚动监听跳转到相应标签的方法，供大家参考，具体内容如下
*注意如果滚动项目的最后一个元素高度必须大于等于滚动区域的高度，不然最后一个元素就滚动不上去，
方法接口的具体参数说明
实际效果图
代码结构
//Html结构
模板
差异
div class=list
保险商实验所
li v-for=(item，index) in title_list :key=index
span ref= spans :style= { color:active step===index？#1987e1 : #000000}
@click=jump(index)
{{item.title}}
/span
/李
/ul
/div
div class= result @ scroll= on scroll
滚动项目范围第一/span/div
滚动项目范围第二/span/div
滚动项目范围第三/span/div
滚动项目范围第四/span/div
/div
/div
/模板
//功能实现代码
脚本
导出默认值{
方法：{
跳转（索引){
var items=文档。查询选择器全部(.滚动项目);
for(var I=0；一。物品长度；i ) {
if (index===i) {
项目[我].scrollIntoView({
块：开始，//默认跳转到顶部
行为："平滑"//滚动的速度
});
}
}
},
onScroll(e) {
让滚动项目=文档。查询选择器全部(.滚动项目);
对于(让I=滚动项目。长度-1；I=0；我- ) {
//判断滚动条滚动距离是否大于当前滚动项可滚动距离
让判断=
e.target.scrollTop=
scrollItems[i].offsetTop - scrollItems[0].抵消
如果（法官){
这个。主动步=I；
打破；
}
}
},
},
data() {
返回{
activeStep :0，
标题_列表：[
{标题：第一},
{标题：第二},
{标题：第三},
{标题：第四},
]
}
}
}
/脚本
//样式
风格。列表{
宽度：100%;
高度：40px
边距-底部：20px
背景：粉色；
}
ul {
宽度：100%;
高度：40px
行高：40px
列表样式：无；
}
李{
浮动：左；
宽度：20%;
字体大小：30px
}
lispan {
光标：指针；
}。结果{
宽度：100%;
高度：500像素
溢出：滚动；
}。滚动项目{
宽度：100%;
高度：500像素
边距-顶部：20px
背景：黄色；
}。滚动项目跨度{
字体大小：40px
}。滚动项目：第一个孩子{
边距-顶部：0;
}。滚动项目：最后一个孩子{
高度：500像素
}/* 最后一个元素的最小高度要大于等于父元素的高度，如果滚动项目为高度自适应的话，那么最后一个滚动项目就得设置最小高度：100%* /
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。