vue实现导航滚动

实现导航滚动的基本思路

在Vue中实现导航滚动效果，可以通过监听页面滚动事件，动态计算当前视口位置与导航项对应区域的匹配关系，从而实现高亮当前可见区域的导航项。

安装必要依赖

使用vue-router和scrollBehavior可以实现基础的路由滚动行为。如需更复杂的滚动效果，可考虑引入scrollmagic或gsap等动画库。

npm install vue-router

基础滚动实现

在Vue组件中，通过window.addEventListener监听滚动事件，计算当前滚动位置与各章节的偏移量匹配关系。

export default {
  data() {
    return {
      currentSection: 0,
      sections: []
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    this.sections = document.querySelectorAll('.content-section')
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      const scrollPosition = window.scrollY
      this.sections.forEach((section, index) => {
        const sectionTop = section.offsetTop
        const sectionHeight = section.offsetHeight
        if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
          this.currentSection = index
        }
      })
    },
    scrollTo(index) {
      const element = this.sections[index]
      window.scrollTo({
        top: element.offsetTop,
        behavior: 'smooth'
      })
    }
  }
}

平滑滚动动画

使用CSS的scroll-behavior属性或JavaScript的scrollTo方法实现平滑滚动效果。

html {
  scroll-behavior: smooth;
}

或者使用JavaScript实现：

function smoothScrollTo(target) {
  const element = document.querySelector(target)
  element.scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  })
}

路由滚动行为配置

在Vue Router中配置滚动行为，确保路由切换时页面滚动到正确位置。

const router = new VueRouter({
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        selector: to.hash,
        behavior: 'smooth'
      }
    }
    if (savedPosition) {
      return savedPosition
    }
    return { x: 0, y: 0 }
  }
})

性能优化建议

避免在滚动事件中执行过多计算，使用节流函数限制事件触发频率。

import { throttle } from 'lodash'

export default {
  methods: {
    handleScroll: throttle(function() {
      // 滚动处理逻辑
    }, 100)
  }
}

响应式导航高亮

结合Vue的响应式特性，动态更新导航样式，反映当前活跃的章节。

<template>
  <nav>
    <ul>
      <li v-for="(item, index) in navItems" 
          :key="index"
          :class="{ 'active': currentSection === index }"
          @click="scrollTo(index)">
        {{ item.title }}
      </li>
    </ul>
  </nav>
</template>

.active {
  color: #42b983;
  font-weight: bold;
}