vue3 实现页面锚点,左边控制右边内容区域滚动

在 Web 应用中,锚点导航是一种常见的 UI 交互模式,尤其适用于文档、目录式页面或单页应用(SPA)。本文将使用 Vue3 实现一个带有锚点功能的页面:左侧是 Tab 控制菜单,右侧是可滚动的内容区域,选中的内容会自动对齐到顶部。

功能需求

左侧 Tab 控制导航,点击后滚动到对应内容。

右侧内容区域可滚动,滚动时 Tab 自动高亮。

内容不足时,仍然可以滚动到顶部

关键点

onScroll 方法中,我们遍历 sectionRefs 计算当前滚动位置,并更新 activeIndex,保证 Tab 与内容联动。

添加 spacer 作为占位元素,确保即使最后一个 Section 也能正确滚动到顶部。

效果图

完整代码示例

xml 复制代码
<template>
  <div class="container">
    <!-- 左侧Tab导航 -->
    <div class="tabs">
      <div
        v-for="(section, index) in sections"
        :key="index"
        :class="['tab', { active: activeIndex === index }]"
        @click="scrollToSection(index)"
      >
        {{ section.name }}
      </div>
    </div>
    
    <!-- 右侧内容区域,可滚动 -->
    <div class="content" ref="contentRef" @scroll="onScroll">
      <div
        v-for="(section, index) in sections"
        :key="index"
        :ref="el => sectionRefs[index] = el"
        class="section"
      >
        <h2>{{ section.name }}</h2>
        <p>{{ section.content }}</p>
      </div>
      
      <!-- 占位符,确保最后一个Section也能滚动到顶部 -->
      <div class="spacer"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';

// 定义章节数据,每个章节包含标题和内容
const sections = ref([
  { name: 'Section 1', content: 'This is section 1' },
  { name: 'Section 2', content: 'This is section 2' },
  { name: 'Section 3', content: 'This is section 3' },
  { name: 'Section 4', content: 'This is section 4' }
]);

// 存储各个section的DOM引用
const sectionRefs = ref([]);
// 右侧滚动区域的引用
const contentRef = ref(null);
// 记录当前选中的Tab索引
const activeIndex = ref(0);

// 处理点击Tab,滚动到对应的Section顶部
const scrollToSection = (index) => {
  if (sectionRefs.value[index]) {
    const contentTop = contentRef.value.offsetTop;
    const targetOffset = sectionRefs.value[index].offsetTop - contentTop;
    contentRef.value.scrollTo({ top: targetOffset, behavior: 'smooth' });
  }
};

// 监听滚动,动态更新当前选中的Tab
const onScroll = () => {
  const scrollTop = contentRef.value.scrollTop;
  let currentActive = 0;
  sectionRefs.value.forEach((el, index) => {
    if (el.offsetTop - contentRef.value.offsetTop <= scrollTop) {
      currentActive = index;
    }
  });
  activeIndex.value = currentActive;
};
</script>

<style scoped>
.container {
  display: flex;
  height: 100vh;
}

/* 左侧Tab栏样式 */
.tabs {
  width: 200px;
  border-right: 1px solid #ddd;
  padding: 10px;
}

.tab {
  padding: 10px;
  cursor: pointer;
}

.tab.active {
  font-weight: bold;
  color: blue;
}

/* 右侧内容区域样式 */
.content {
  flex: 1;
  overflow-y: auto;
  height: 100vh;
  padding: 20px;
  position: relative;
}

/* 章节样式 */
.section {
  height: 300px;
  padding: 20px;
  border-bottom: 1px solid #ddd;
}

/* 空间占位,保证最后一个Section能滚动到顶部 */
.spacer {
  height: 100vh;
}
</style>
相关推荐
2301_1472583692 分钟前
7月1日作业
java·前端·算法
汪子熙3 分钟前
Angular 应用中手动调用 subscribe 方法的时机与实践探讨
前端
MiyueFE35 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子39 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟2 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游2 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构