vue 实现平滑滚动
vue 实现平滑滚动的方法
使用原生 scrollIntoView
通过调用元素的 scrollIntoView 方法并设置 behavior: 'smooth' 实现平滑滚动。适用于简单场景。
document.getElementById('target').scrollIntoView({
behavior: 'smooth'
});自定义滚动函数
通过 window.scrollTo 结合 requestAnimationFrame 实现自定义滚动动画，适合需要精细控制的情况。
function smoothScrollTo(targetPosition, duration = 1000) {
const startPosition = window.pageYOffset;
const distance = targetPosition - startPosition;
let startTime = null;
function 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);
}
function 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);
}使用 vue-scrollto 插件
安装官方推荐的 vue-scrollto 插件，提供声明式指令和编程式调用。
npm install vue-scrollto注册插件后，可通过指令或方法调用：
import VueScrollTo from 'vue-scrollto';
Vue.use(VueScrollTo);
// 指令方式
<a v-scroll-to="'#target'">Scroll</a>
// 方法调用
this.$scrollTo('#target', {
duration: 800,
easing: 'ease-in'
});结合 CSS scroll-behavior
在支持 CSS 的现代浏览器中，可通过全局样式启用平滑滚动（需注意浏览器兼容性）。
html {
scroll-behavior: smooth;
}注意事项
- 移动端需测试性能表现，复杂动画可能导致卡顿
- 自定义滚动函数需考虑边界条件（如滚动距离为0）
- 插件方案需注意版本兼容性，建议查看最新文档
