vue实现页面滚动效果
使用 v-scroll 指令实现滚动监听
Vue 可以通过自定义指令 v-scroll 监听页面滚动事件。在 main.js 或组件中注册指令：
Vue.directive('scroll', {
inserted(el, binding) {
window.addEventListener('scroll', binding.value);
},
unbind(el, binding) {
window.removeEventListener('scroll', binding.value);
}
});在组件中使用：
<template>
<div v-scroll="handleScroll"></div>
</template>
<script>
export default {
methods: {
handleScroll() {
console.log(window.scrollY);
}
}
};
</script>使用 window.scrollTo 实现平滑滚动
通过 window.scrollTo 或 element.scrollIntoView 实现滚动到指定位置：
// 滚动到页面顶部
window.scrollTo({
top: 0,
behavior: 'smooth'
});
// 滚动到指定元素
document.getElementById('target').scrollIntoView({
behavior: 'smooth'
});使用第三方库 vue-scrollto
安装 vue-scrollto 库：
npm install vue-scrollto在 Vue 中注册插件：
import VueScrollTo from 'vue-scrollto';
Vue.use(VueScrollTo);使用方式：
<button v-scroll-to="'#target'">滚动到目标</button>
<div id="target">目标位置</div>或通过方法调用：
this.$scrollTo('#target', 500, { easing: 'ease-in-out' });结合 CSS 实现视差滚动效果
通过 CSS transform 和滚动事件联动实现视差效果：
<template>
<div class="parallax-container">
<div class="parallax-bg" :style="{ transform: `translateY(${offset * 0.5}px)` }"></div>
</div>
</template>
<script>
export default {
data() {
return { offset: 0 };
},
mounted() {
window.addEventListener('scroll', () => {
this.offset = window.scrollY;
});
}
};
</script>
<style>
.parallax-container {
height: 100vh;
overflow: hidden;
position: relative;
}
.parallax-bg {
background-image: url('bg.jpg');
height: 200%;
width: 100%;
position: absolute;
top: 0;
}
</style>使用 Intersection Observer API 实现懒加载
监听元素进入视口时触发动作（如懒加载图片）：
export default {
methods: {
initObserver() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
});
});
document.querySelectorAll('.lazy-img').forEach(img => observer.observe(img));
}
},
mounted() {
this.initObserver();
}
};HTML 结构：
<img class="lazy-img" data-src="actual-image.jpg" src="placeholder.jpg">注意事项
- 滚动事件需在组件销毁时移除监听，避免内存泄漏。
- 高频滚动的性能优化可使用
requestAnimationFrame或节流函数。 - 移动端兼容性需测试
passive事件选项。
