Vue3与Element Plus实现平滑滚动导航的技术实践-代码聚汇网

Vue3与Element Plus实现平滑滚动导航的技术实践

WebSorceress·2026-08-11·阅读 23 GEO检测（免费）

Vue3Element Plus平滑滚动

|难度：普通|阅读约 26 分钟

1. Vue3与Element Plus实现平滑滚动导航的核心逻辑

在单页应用(SPA)开发中，平滑滚动到指定位置是提升用户体验的关键细节。传统锚点跳转的突兀感与现代Web应用的流畅体验格格不入，而Vue3的组合式API配合Element Plus的UI组件为我们提供了优雅的实现方案。

这个功能的本质是通过JavaScript监听导航点击事件，计算目标位置坐标，然后使用window.scrollTo或自定义滚动动画实现视觉过渡。在Vue3环境下，我们需要特别处理以下几个技术要点：

获取目标元素的实际DOM位置（需考虑页面动态渲染导致的布局变化）
实现平滑滚动的动画曲线（easing function）
与Element Plus导航菜单的集成方案
响应式设计下的边界情况处理

关键提示：Edge浏览器新版在平滑滚动效果上与Chrome存在差异，这是需要特别注意的兼容性问题点。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 基础环境搭建与依赖配置

2.1 初始化Vue3项目

推荐使用Vite创建项目以获得最佳开发体验：

bash复制npm create vite@latest vue3-smooth-scroll --template vue
cd vue3-smooth-scroll
npm install element-plus

2.2 Element Plus按需引入配置

在main.js中配置Element Plus：

javascript复制import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

2.3 页面结构设计

典型的单页长滚动页面结构示例：

html复制<template>
  <div class="container">
    <el-menu 
      mode="horizontal" 
      @select="handleSelect"
      class="navigation">
      <el-menu-item index="section1">产品介绍</el-menu-item>
      <el-menu-item index="section2">功能特性</el-menu-item>
      <el-menu-item index="section3">客户案例</el-menu-item>
      <el-menu-item index="section4">联系我们</el-menu-item>
    </el-menu>

    <section id="section1" class="page-section">...</section>
    <section id="section2" class="page-section">...</section>
    <section id="section3" class="page-section">...</section>
    <section id="section4" class="page-section">...</section>
  </div>
</template>

3. 核心滚动逻辑实现

3.1 基础滚动函数封装

在Vue3的setup语法中实现核心滚动逻辑：

javascript复制import { onMounted } from 'vue'

export default {
  setup() {
    const scrollToSection = (id) => {
      const element = document.getElementById(id)
      if (!element) return
      
      const offset = 80 // 考虑固定导航栏的高度
      const targetPosition = element.getBoundingClientRect().top + window.pageYOffset - offset
      
      window.scrollTo({
        top: targetPosition,
        behavior: 'smooth'
      })
    }

    return { scrollToSection }
  }
}

3.2 增强型平滑滚动方案

原生scrollTo的behavior: 'smooth'在不同浏览器表现不一致，我们可以实现自定义动画：

javascript复制const smoothScroll = (targetPosition, duration = 500) => {
  const startPosition = window.pageYOffset
  const distance = targetPosition - startPosition
  let startTime = null

  const animation = (currentTime) => {
    if (!startTime) startTime = currentTime
    const timeElapsed = currentTime - startTime
    const run = easeInOutQuad(timeElapsed, startPosition, distance, duration)
    window.scrollTo(0, run)
    if (timeElapsed < duration) requestAnimationFrame(animation)
  }

  // 二次缓动函数
  const easeInOutQuad = (t, b, c, d) => {
    t /= d/2
    if (t < 1) return c/2*t*t + b
    t--
    return -c/2 * (t*(t-2) - 1) + b
  }

  requestAnimationFrame(animation)
}

3.3 与Element Plus菜单集成

处理菜单点击事件并触发滚动：

javascript复制const handleSelect = (index) => {
  scrollToSection(index)
}

4. 高级功能实现与优化

4.1 滚动位置监听与菜单高亮

实现滚动时自动高亮对应菜单项：

javascript复制import { ref, onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const activeSection = ref('section1')
    const sectionIds = ['section1', 'section2', 'section3', 'section4']
    
    const handleScroll = () => {
      const scrollPosition = window.scrollY + 100
      
      for (const id of sectionIds) {
        const element = document.getElementById(id)
        if (!element) continue
        
        const offsetTop = element.offsetTop
        const offsetHeight = element.offsetHeight
        
        if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
          activeSection.value = id
          break
        }
      }
    }

    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })

    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll)
    })

    return { activeSection }
  }
}

4.2 路由集成方案

在vue-router环境中实现hash导航与平滑滚动的兼容：

javascript复制import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    
    const scrollToSection = (id) => {
      // ...滚动逻辑同上...
      router.push({ hash: `#${id}` })
    }

    return { scrollToSection }
  }
}

5. 性能优化与兼容性处理

5.1 滚动事件节流优化

避免滚动监听导致的性能问题：

javascript复制import { throttle } from 'lodash-es'

const handleScroll = throttle(() => {
  // ...原有滚动逻辑...
}, 100)

5.2 浏览器兼容性方案

检测并回退不支持平滑滚动的浏览器：

javascript复制const supportsSmoothScroll = 'scrollBehavior' in document.documentElement.style

const scrollToSection = (id) => {
  const element = document.getElementById(id)
  if (!element) return
  
  const offset = 80
  const targetPosition = element.offsetTop - offset
  
  if (supportsSmoothScroll) {
    window.scrollTo({
      top: targetPosition,
      behavior: 'smooth'
    })
  } else {
    // 使用polyfill或自定义动画
    smoothScroll(targetPosition)
  }
}

5.3 Edge浏览器特别处理

针对新版Edge的滚动效果优化：

javascript复制const isEdge = navigator.userAgent.includes('Edg/')

const scrollOptions = {
  top: targetPosition,
  behavior: isEdge ? 'auto' : 'smooth'
}

window.scrollTo(scrollOptions)

6. 常见问题与解决方案

6.1 动态内容加载后的定位问题

当页面内容异步加载时，元素位置可能计算错误：

javascript复制const scrollToSection = async (id) => {
  await nextTick() // 等待Vue DOM更新
  const element = document.getElementById(id)
  // ...后续逻辑...
}

6.2 移动端触摸事件冲突

处理移动端的触摸滚动与程序滚动的冲突：

javascript复制let isProgrammaticScroll = false

const handleScroll = () => {
  if (isProgrammaticScroll) {
    isProgrammaticScroll = false
    return
  }
  // ...正常滚动逻辑...
}

const scrollToSection = (id) => {
  isProgrammaticScroll = true
  // ...滚动逻辑...
}

6.3 导航栏固定定位的偏移计算

更精确的偏移量计算方案：

javascript复制const calculateOffset = () => {
  const nav = document.querySelector('.navigation')
  return nav ? nav.offsetHeight + 20 : 80 // 默认值
}

7. 完整实现示例

以下是整合所有功能的完整组件示例：

html复制<template>
  <div class="app-container">
    <el-menu 
      :default-active="activeSection"
      mode="horizontal"
      @select="handleSelect"
      class="navigation-bar">
      <el-menu-item index="section1">产品介绍</el-menu-item>
      <el-menu-item index="section2">功能特性</el-menu-item>
      <el-menu-item index="section3">客户案例</el-menu-item>
      <el-menu-item index="section4">联系我们</el-menu-item>
    </el-menu>

    <main>
      <section id="section1" class="content-section">
        <h2>产品介绍</h2>
        <!-- 内容区 -->
      </section>
      <!-- 其他section -->
    </main>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { throttle } from 'lodash-es'

export default {
  setup() {
    const activeSection = ref('section1')
    const sectionIds = ['section1', 'section2', 'section3', 'section4']
    let isProgrammaticScroll = false

    const supportsSmoothScroll = 'scrollBehavior' in document.documentElement.style
    const isEdge = navigator.userAgent.includes('Edg/')

    const calculateOffset = () => {
      const nav = document.querySelector('.navigation-bar')
      return nav ? nav.offsetHeight + 20 : 80
    }

    const smoothScroll = (targetPosition, duration = 500) => {
      const startPosition = window.pageYOffset
      const distance = targetPosition - startPosition
      let startTime = null

      const animation = (currentTime) => {
        if (!startTime) startTime = currentTime
        const timeElapsed = currentTime - startTime
        const run = easeInOutQuad(timeElapsed, startPosition, distance, duration)
        window.scrollTo(0, run)
        if (timeElapsed < duration) requestAnimationFrame(animation)
      }

      const easeInOutQuad = (t, b, c, d) => {
        t /= d/2
        if (t < 1) return c/2*t*t + b
        t--
        return -c/2 * (t*(t-2) - 1) + b
      }

      requestAnimationFrame(animation)
    }

    const scrollToSection = async (id) => {
      await nextTick()
      const element = document.getElementById(id)
      if (!element) return
      
      const offset = calculateOffset()
      const targetPosition = element.offsetTop - offset
      
      isProgrammaticScroll = true

      if (supportsSmoothScroll && !isEdge) {
        window.scrollTo({
          top: targetPosition,
          behavior: 'smooth'
        })
      } else {
        smoothScroll(targetPosition)
      }
    }

    const handleScroll = throttle(() => {
      if (isProgrammaticScroll) {
        isProgrammaticScroll = false
        return
      }

      const scrollPosition = window.scrollY + calculateOffset()
      
      for (const id of sectionIds) {
        const element = document.getElementById(id)
        if (!element) continue
        
        const offsetTop = element.offsetTop
        const offsetHeight = element.offsetHeight
        
        if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
          activeSection.value = id
          break
        }
      }
    }, 100)

    const handleSelect = (index) => {
      scrollToSection(index)
    }

    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })

    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll)
    })

    return { activeSection, handleSelect }
  }
}
</script>

<style>
.app-container {
  max-width: 1200px;
  margin: 0 auto;
}

.navigation-bar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.content-section {
  min-height: 100vh;
  padding: 120px 20px 40px;
  scroll-margin-top: 80px;
}
</style>

8. 扩展功能思路

8.1 滚动进度指示器

在导航栏添加滚动进度条：

html复制<div class="scroll-progress" :style="{ width: `${scrollProgress}%` }"></div>

<script>
const scrollProgress = ref(0)

const handleScroll = throttle(() => {
  // ...原有逻辑...
  
  const docHeight = document.documentElement.scrollHeight - window.innerHeight
  const scrolled = (window.scrollY / docHeight) * 100
  scrollProgress.value = scrolled
}, 100)
</script>

<style>
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: var(--el-color-primary);
  z-index: 1001;
  transition: width 0.1s;
}
</style>

8.2 视差滚动效果

为不同章节添加视差效果：

css复制.parallax-section {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

8.3 滚动触发动画

使用Intersection Observer API实现元素进入视口时的动画：

javascript复制const setupScrollAnimations = () => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('animate-in')
      }
    })
  }, { threshold: 0.1 })

  document.querySelectorAll('.animate-on-scroll').forEach(el => {
    observer.observe(el)
  })
}

onMounted(() => {
  setupScrollAnimations()
})

9. 项目构建与部署建议

9.1 生产环境优化

配置vite构建选项：

javascript复制// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'element-plus': ['element-plus'],
          'lodash': ['lodash-es']
        }
      }
    }
  }
})

9.2 性能监测

添加Lighthouse性能监测：

bash复制npm install -D lighthouse
npx lighthouse http://localhost:3000 --view

9.3 部署注意事项

配置Nginx正确处理单页应用路由：

nginx复制location / {
  try_files $uri $uri/ /index.html;
}

10. 调试技巧与开发工具

10.1 Chrome DevTools调试

使用Chrome的Performance面板记录滚动性能：

打开DevTools → Performance
点击Record
执行页面滚动
停止记录分析火焰图

10.2 Vue DevTools集成

利用Vue DevTools检查组件状态：

javascript复制// 在开发环境中启用
app.config.devtools = true

10.3 滚动行为日志

添加滚动调试日志：

javascript复制const scrollToSection = async (id) => {
  console.log(`[Scroll] Starting scroll to ${id}`)
  const startTime = performance.now()
  
  // ...滚动逻辑...

  const endTime = performance.now()
  console.log(`[Scroll] Completed in ${(endTime - startTime).toFixed(2)}ms`)
}

在实际项目中，我发现平滑滚动的性能优化往往被忽视。特别是在低端移动设备上，复杂的页面结构加上平滑滚动效果可能导致明显的卡顿。经过多次测试，最终采用了根据设备性能动态调整滚动持续时间的方案：对于高性能设备使用500ms的动画时长，而对于低性能设备则降级到300ms，在保证基本效果的同时提升性能表现。