可以通过以下几个步骤实现：
1. 在
菜单中添加点击事件，获取对应的
锚点id。
2. 使用`ref`属性获取到内容容器的元素。
3. 在内容容器上绑定`scroll`事件，监听滚动位置。
4. 根据当前滚动位置，判断哪个
锚点处于可视范围内，并高亮对应的
菜单项。
具体代码如下：
菜单部分：
```
<template>
<div>
<ul>
<li v-for="item in menu" :key="item.id" @click="scrollTo
Anchor(item.id)" :class="{active: active
Anchor === item.id}">
{{ item.title }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
menu: [
{ id: 'a1', title: '
锚点1' },
{ id: 'a2', title: '
锚点2' },
{ id: 'a3', title: '
锚点3' }
],
active
Anchor: '' // 当前激活的
锚点id
}
},
methods: {
scrollTo
Anchor(
anchorId) {
// 获取对应的
锚点元素
const
anchorElement = document.getElementById(
anchorId);
if (
anchorElement) {
// 滚动到
锚点位置
anchorElement.scrollIntoView({ behavior: 'smooth' });
// 设置当前激活的
锚点id
this.active
Anchor =
anchorId;
}
}
}
}
</script>
```
内容部分：
```
<template>
<div ref="content" @scroll="onScroll">
<div id="a1">
锚点1内容</div>
<div id="a2">
锚点2内容</div>
<<div id="a3">
锚点3内容</div>
</div>
</template>
<script>
export default {
methods: {
onScroll() {
// 获取内容容器的高度和滚动位置
const contentHeight = this.$refs.content.offsetHeight;
const scrollTop = this.$refs.content.scrollTop;
// 遍历所有
锚点，判断哪个处于可视范围内
for (let i = 0; i < this.menu.length; i++) {
const
anchorId = this.menu[i].id;
const
anchorElement = document.getElementById(
anchorId);
if (
anchorElement) {
const
anchorTop =
anchorElement.offsetTop;
const
anchorBottom =
anchorTop +
anchorElement.offsetHeight;
if (scrollTop >=
anchorTop && scrollTop <
anchorBottom) {
// 设置当前激活的
锚点id
this.$emit('active-
anchor',
anchorId);
break;
}
}
}
}
}
}
</script>
```
837
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
