当前位置：首页 > VUE

vue实现滚轮特效

2026-01-16 23:50:17VUE

vue实现滚轮特效的方法

使用原生事件监听

在Vue组件中通过@wheel事件监听滚轮动作，结合CSS transform属性实现缩放或位移效果。示例代码：

vue实现滚轮特效

<template>
  <div class="zoom-container" @wheel="handleWheel">
    <div class="content">滚动缩放区域</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scale: 1
    }
  },
  methods: {
    handleWheel(e) {
      e.preventDefault()
      this.scale += e.deltaY * -0.01
      this.scale = Math.min(Math.max(1, this.scale), 3)
    }
  }
}
</script>

<style>
.zoom-container {
  overflow: hidden;
}
.content {
  transform: scale(v-bind(scale));
  transition: transform 0.1s;
}
</style>

结合第三方库

使用vueuse库的useWheel组合式API可以更简洁地实现：

vue实现滚轮特效

import { useWheel } from '@vueuse/core'

export default {
  setup() {
    const scale = ref(1)
    useWheel(
      (event) => {
        scale.value += event.deltaY * -0.01
        scale.value = Math.min(Math.max(1, scale.value), 3)
      },
      { passive: false }
    )
    return { scale }
  }
}

页面滚动特效

实现整页滚动动画可结合gsap动画库：

import gsap from 'gsap'

export default {
  mounted() {
    window.addEventListener('wheel', this.scrollAnimation)
  },
  methods: {
    scrollAnimation(e) {
      gsap.to('.section', {
        y: -window.scrollY * 0.3,
        duration: 0.5
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('wheel', this.scrollAnimation)
  }
}

视差滚动效果

通过计算滚动距离实现多层视差：

<template>
  <div class="parallax-container">
    <div 
      v-for="(layer, index) in layers" 
      :key="index"
      :style="{ transform: `translateY(${scrollY * layer.speed}px)` }"
      class="parallax-layer"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollY: 0,
      layers: [
        { speed: 0.1 },
        { speed: 0.3 },
        { speed: 0.6 }
      ]
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      this.scrollY = window.scrollY
    }
  }
}
</script>