锚点跳转到对应页面的区域使用 scrollIntoView
// anchor即你要跳转到的元素
anchor.scrollIntoView({
behavior: "smooth",
block: "center",
inline: "nearest"
});
1、behavior：定义滚动行为。它可以设置为 “auto” 或 “smooth”。默认是 “auto”。
“auto”：立即跳转到元素，没有动画。
“smooth”：平滑地滚动到元素，有动画效果。
2、block：定义垂直方向的对齐方式。它可以设置为 “start”、“center”、“end” 或 “nearest”。默认是 “start”。
“start”：元素的顶部与视口的顶部对齐。
“center”：元素的中心与视口的中心对齐。
“end”：元素的底部与视口的底部对齐。
“nearest”：滚动到最接近视口的位置。
3、inline：定义水平方向的对齐方式。它可以设置为 “start”、“center”、“end” 或 “nearest”。默认是 “nearest”。
“start”：元素的左侧与视口的左侧对齐。
“center”：元素的中心与视口的中心对齐。
“end”：元素的右侧与视口的右侧对齐。
“nearest”：滚动到最接近视口的位置。
下面代码主要是针对具体项目可能遇到的一些问题，主要是我自己做一个记录，上面其实已经给出了答案，大家酌情看下面的内容：
监听滚动的盒子 html 结构
<div ref="scrollFun">
<div class="compute-nav-num" id="navEle1"></div>
<div class="compute-nav-num" id="navEle2"></div>
<div class="compute-nav-num" id="navEle3"></div>
</div>
监听滚动的盒子js逻辑
const scrollFun = ref();
onMounted(() => {
scrollFun.value.addEventListener('scroll', handleScroll);
});
onBeforeUnmount(() => {
scrollFun.value.removeEventListener('scroll', handleScroll)
});
const handleScroll = () => {
handleScroll();
};
const closeEventFun = () => {
scrollFun.value.removeEventListener('scroll', handleScroll);
}
const openEventFun = () => {
scrollFun.value.addEventListener('scroll', handleScroll);
}
const handleScroll = () => {
if (scrollTimer) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(() => {
// compute-nav-num 这个类名是为了收集所有滚动的盒子里的子集
const viewList = document.querySelectorAll('.compute-nav-num');
let active = 0;
if (viewList.length === 0) return;
for (let i = 0; i < viewList.length; i++) {
const top = (scrollFun as any).value.scrollTop + 30;
if (i === 0) {
const next = (viewList[i + 1] as any).offsetTop;
if (top < next) {
active = i;
break;
}
} else {
const target = (viewList[i] as any).offsetTop;
const next = (viewList[i + 1] as any).offsetTop;
if (top > target || top == target) {
if (top < next) {
active = i;
break;
}
}
}
}
activeNavIndex.value = active + 1;
}, 50);
};
const routerClick = (obj: any) => {
// i是点亮导航栏的
activeNavIndex.value = Number(obj.i);
// id是固定的 是控制滚动的
viewActive(obj.id);
};
const viewActive = (id: any) => {
// 当点击导航栏时清除滚动监听，这是因为scrollIntoView事件，也会触发滚动监听
// 关闭主要是因为，最下面总有几个特别小的盒子，滚动其实是无法点亮对应导航栏的
// 点击属于最后几个小盒子对应的导航栏时，如果滚动监听也触发了，那最后算的 activeNavIndex肯定不对
closeEventFun();
const anchor = document.querySelector('#navEle' + id);
if (anchor) {
anchor.scrollIntoView({
behavior: 'smooth'
});
}
// 下面的事件既是滚动的一个事件间隔，争取在滚动结束后，再放开监听
setTimeout(() => {
openEventFun();
}, 850);
}
导航栏组件
// 这里的数据 id之所以写这里，是为了固定id数值，这样是为了适应，导航栏有时在某些情况下
// 需要隐藏一些，这时 index 就是随机的，加上固定id，点击传出，这样 querySelector 才能找到
let navListObj: any = reactive([
{
name: '工单',
id: '1',
img: orderInfo,
imgActive: orderInfoActive
},
{
name: '来电',
id: '2',
img: phoneInfo,
imgActive: phoneInfoActive
}
]);
// 点击传出参数
const emit = defineEmits(["routerClick"]);
const routerClick = (id: any, i: any) => {
emit("routerClick", {id: id, i: i});
}
<div class="affix-nav">
<ul>
<li v-for="(obj, i) in navListObj" :key="i">
<a @click="routerClick(obj.id, i + 1)" :class="activeNavIndex === i + 1 ? 'active' : ''">
<img :src="activeNavIndex === (i + 1) ? obj.imgActive : obj.img" alt="">
<span>{{ (obj as any).name1 }}</span>
<span v-if="(obj as any).name2">{{ (obj as any).name2 }}</span>
</a>
</li>
</ul>
</div>
.affix-nav {
max-height: 60%;
position: absolute;
right: 5px;
top: 0;
bottom: 0;
margin: auto;
z-index: 1000;
overflow: auto;
background-color: #fff;
box-shadow: -2px 2px 10px rgba(0, 0, 0, .5);
padding: 20px 8px;
border-radius: 5px;
ul {
padding-left: 0;
}
li a {
text-align: center;
display: block;
font-size: 12px;
margin-bottom: 10px;
cursor: pointer;
img {
position: relative;
right: 0;
left: 0;
margin: auto;
padding-bottom: 5px;
}
span {
color: #BBBBBB;
line-height: 16px;
display: block;
}
}
.active span {
color: #f00;
}
}
