###
Vue3 中
实现锚点定位双向滚动效果
在
Vue3 或 Nuxt3 项目中，可以通过
监听滚动事件以及结合 `IntersectionObserver` API 来
实现锚点定位的 **
双向滚动效果**。这种效果通常用于文档类网站或博客，当用户
点击某个菜单项时会平滑
滚动到对应的章节；而当用户手动
滚动页面时，也会自动更新菜单中的激活状态。
以下是具体
实现方法：
#### 1. 页面结构设计
HTML 结构分为两部分：左侧为导航菜单，右侧为内容区域。每个导航菜单项对应一个内容区块。
```html
<template>
<div class="container">
<!
-- 左侧导航
-->
<nav id="menu" class="sidebar">
<ul>
<li v
-for="
(item, index
) in sections" :key="index" @click="scrollToSection
(item.id
)">
{{ item.name }}
</li>
</ul>
</nav>
<!
-- 右侧内容
-->
<main class="content">
<section v
-for="
(section, idx
) in sections" :id="section.id" :key="'sec
-' + idx">
<h2>{{ section.name }}</h2>
<p>这里是{{ section.name}}的内容...</p>
</section>
</main>
</div>
</template>
```
---
#### 2. 数据定义
通过数据绑定的方式管理导航菜单和内容区块的关系。
```javascript
<script setup>
import { ref, onMounted } from '
vue';
const sections = [
{ name: '简介', id: 'introduction' },
{ name: '特
点', id: 'features' },
{ name: '安装', id: 'installation' },
{ name: '使用指南', id: 'usage
-guide' }
];
// 当前活动的菜单索引
const activeIndex = ref
(0
);
onMounted
(() => {
observeSections
();
}
);
</script>
```
---
#### 3. 平滑
滚动逻辑
利用 JavaScript 的 `scrollIntoView` 方法
实现点击导航菜单后的平滑
滚动效果。
```javascript
function scrollToSection
(id
) {
const
element = document.get
ElementById
(id
);
if
(element
) {
element.scrollIntoView
({ behavior: 'smooth', block: 'start' }
);
}
}
```
---
#### 4. 自动高亮当前菜单项
为了
实现在用户
滚动页面时
动态更新导航菜单的状态，可以借助 `IntersectionObserver` API 检测各个区块是否进入视口范围。
```javascript
function observeSections
() {
const options = {
rootMargin: '
-50% 0px
-50% 0px',
threshold: 0.5,
};
const observer = new IntersectionObserver
((entries
) => {
entries.forEach
((entry
) => {
if
(entry.isIntersecting
) {
// 更新当前活跃的菜单项
updateActiveMenu
(entry.target.getAttribute
('id'
));
}
}
);
}, options
);
// 遍历所有 content 块并观察它们
sections.forEach
(({ id }
) => {
const
el = document.get
ElementById
(id
);
if
(el) observer.observe
(el);
}
);
}
function updateActiveMenu
(activeId
) {
activeIndex.value = sections.findIndex
((s
) => s.id === activeId
);
}
```
---
#### 5. 样式调整
为了让用户体验更佳，可设置样式来突出显示当前激活的菜单项。
```css
<style scoped>
.sidebar ul li {
cursor: pointer;
padding: 8px 16px;
transition: background
-color 0.3s ease
-in
-out;
}
.sidebar ul li:hover {
background
-color: #f0f0f0;
}
/* 设置激活状态 */
.sidebar ul li.active {
font
-weight: bold;
color: blue;
background
-color: lightblue;
}
.content h2 {
margin
-top: 50px; /* 确保有足够空间触发交集检测 */
}
</style>
```
---
#### 完整代码示例
将上述片段组合起来即可完成整个功能模块。
```html
<template>
<div class="container">
<nav id="menu" class="sidebar">
<ul>
<li
v
-for="
(item, index
) in sections"
:key="index"
:class="{ active: activeIndex === index }"
@click="scrollToSection
(item.id
)"
>
{{ item.name }}
</li>
</ul>
</nav>
<main class="content">
<section v
-for="
(section, idx
) in sections" :id="section.id" :key="'sec
-' + idx">
<h2>{{ section.name }}</h2>
<p>这里是{{ section.name }}的内容...</p>
</section>
</main>
</div>
</template>
<script setup>
import { ref, onMounted } from '
vue';
const sections = [
{ name: '简介', id: 'introduction' },
{ name: '特
点', id: 'features' },
{ name: '安装', id: 'installation' },
{ name: '使用指南', id: 'usage
-guide' },
];
const activeIndex = ref
(0
);
function scrollToSection
(id
) {
const
element = document.get
ElementById
(id
);
if
(element
) {
element.scrollIntoView
({ behavior: 'smooth', block: 'start' }
);
}
}
function observeSections
() {
const options = {
rootMargin: '
-50% 0px
-50% 0px',
threshold: 0.5,
};
const observer = new IntersectionObserver
((entries
) => {
entries.forEach
((entry
) => {
if
(entry.isIntersecting
) {
updateActiveMenu
(entry.target.getAttribute
('id'
));
}
}
);
}, options
);
sections.forEach
(({ id }
) => {
const
el = document.get
ElementById
(id
);
if
(el) observer.observe
(el);
}
);
}
function updateActiveMenu
(activeId
) {
activeIndex.value = sections.findIndex
((s
) => s.id === activeId
);
}
onMounted
(() => {
observeSections
();
}
);
</script>
<style scoped>
.sidebar ul li {
cursor: pointer;
padding: 8px 16px;
transition: background
-color 0.3s ease
-in
-out;
}
.sidebar ul li:hover {
background
-color: #f0f0f0;
}
.sidebar ul li.active {
font
-weight: bold;
color: blue;
background
-color: lightblue;
}
.content h2 {
margin
-top: 50px;
}
</style>
```
---
css，滚动条就在这上面，所以，我这里使用的@scroll方法，
最低0.47元/天 解锁文章
扫一扫
8113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
