当前位置：首页 > VUE

vue 实现页面滚动

2026-02-17 16:17:46VUE

Vue 实现页面滚动的方法

使用原生 JavaScript 方法

在 Vue 中可以通过 window.scrollTo() 或 Element.scrollIntoView() 实现滚动效果。在方法中调用这些原生 API 即可。

// 滚动到页面顶部
window.scrollTo({
  top: 0,
  behavior: 'smooth' // 平滑滚动
});

// 滚动到指定元素
document.getElementById('target').scrollIntoView({
  behavior: 'smooth'
});

使用 Vue 指令封装滚动

可以自定义一个 Vue 指令来简化滚动操作，例如 v-scroll-to。

Vue.directive('scroll-to', {
  inserted: function (el, binding) {
    el.addEventListener('click', () => {
      const target = document.querySelector(binding.value);
      if (target) {
        target.scrollIntoView({
          behavior: 'smooth'
        });
      }
    });
  }
});

使用方式：

<button v-scroll-to="'#section'">滚动到 Section</button>

使用第三方库

vue-scrollto 是一个流行的 Vue 滚动插件，提供更丰富的功能。

安装：

npm install vue-scrollto

使用：

import VueScrollTo from 'vue-scrollto';

Vue.use(VueScrollTo);

// 在组件中调用
this.$scrollTo('#target', 500, {
  easing: 'ease-in',
  offset: -50
});

监听滚动事件

在 Vue 中可以通过 window.addEventListener 监听滚动事件，并在组件销毁时移除监听。

export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      console.log(window.scrollY);
    }
  }
};

使用 Vue Router 的滚动行为

如果使用 Vue Router，可以在路由配置中定义滚动行为。

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

性能优化

对于频繁触发的滚动事件（如 scroll 或 resize），建议使用防抖（debounce）或节流（throttle）来优化性能。

vue 实现页面滚动

import { debounce } from 'lodash';

export default {
  methods: {
    handleScroll: debounce(function() {
      console.log(window.scrollY);
    }, 100)
  }
};

以上方法覆盖了 Vue 中实现页面滚动的常见需求，可根据具体场景选择合适的方式。