vue实现锚点跳转及滚动监听的方法

vue中实现锚点跳转以及滚动监听跳转到相应标签的方法，供大家参考，具体内容如下

*注意·如果scroll-item的最后一个元素高度必须大于等于滚动区域的高度，不然最后一个元素就滚动不上去，

scrollIntoView接口的具体参数说明

实际效果图

代码结构

// Html结构
<template>
? <div>
? ? <div class="list">
? ? ? <ul>
? ? ? ? <li v-for="(item,index) in title_list" :key="index">
? ? ? ? <span ref="spans" :style="{color: activeStep === index ? '#1987e1' : '#000000'}"
? ? ? ? @click="jump(index)">
? ? ? ? {{item.title}}
? ? ? ? </span>
? ? ? ? </li>
? ? ? </ul>
? ? </div>
? ? <div class="result" @scroll="onScroll" >
? ? ? <div class="scroll-item"><span>第一</span></div>
? ? ? <div class="scroll-item"><span>第二</span></div>
? ? ? <div class="scroll-item"><span>第三</span></div>
? ? ? <div class="scroll-item"><span>第四</span></div>
? ? </div>
? </div>
</template>

//功能实现代码
<script>
export default {
? methods:{
? ? jump(index) {
? ? ? var items = document.querySelectorAll(".scroll-item");
? ? ? for (var i = 0; i < items.length; i++) {
? ? ? ? if (index === i) {
? ? ? ? ? items[i].scrollIntoView({
? ? ? ? ? ? block: "start",//默认跳转到顶部
? ? ? ? ? ? behavior: "smooth"//滚动的速度
? ? ? ? ? });
? ? ? ? }
? ? ? }
? ? },
? ? 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;
? ? ? ? }
? ? ? }
? ? }, ? ?
? },
? data() {
? ? return {
? ? ? activeStep :0,
? ? ? title_list:[
? ? ? ? {title:'第一'},
? ? ? ? {title:'第二'}, ? ? ? ?
? ? ? ? {title:'第三'},
? ? ? ? {title:'第四'},
? ? ? ? ]
? ? }
? }
}
</script>

//样式
<style>
.list {
? width: 100%;
? height: 40px;
? margin-bottom: 20px;
? background: pink;
}
ul {
? width: 100%;
? height: 40px;
? line-height: 40px;
? list-style: none;
}
li {
? float: left;
? width: 20%;
? font-size: 30px;
}
li>span {
? cursor:pointer;
}
.result {
? width: 100%;
? height: 500px;
? overflow: scroll;
}
.scroll-item {
? width: 100%;
? height: 500px;
? margin-top:20px;
? background: yellow;
}
.scroll-item>span {
? font-size: 40px;
}
.scroll-item:first-child {
? margin-top: 0;
}
.scroll-item:last-child {
? height: 500px;
}/ * 最后一个元素的最小高度要大于等于父元素的高度，如果scroll-item为高度自适应的话，那么最后一个scroll-item就得设置min-height：100%* /
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于vue实现锚点跳转及滚动监听的方法的详细内容...