vue版本的视差滚动代码

下面是一个简单的 Vue 组件实现视差滚动效果的代码：

模板：

<template>
  <div class="parallax-container">
    <div class="parallax" :style="{ transform: `translate3d(0, ${offset}px, 0)` }">
      <slot />
    </div>
  </div>
</template>

样式：

.parallax-container {
  height: 500px;
  overflow: hidden;
  position: relative;
}

.parallax {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150%;
  transform-origin: center center;
}

JavaScript：

<script>
export default {
  data() {
    return {
      offset: 0,
      lastScrollTop: 0
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    this.handleScroll()
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
      const delta = scrollTop - this.lastScrollTop
      this.offset += delta * 0.2
      this.lastScrollTop = scrollTop
    }
  }
}
</script>

在这个例子中，我们使用 `translate3d` 属性来控制滚动的效果。 `handleScroll` 方法监听页面滚动事件，计算滚动距离并更新 `offset` 的值。在模板中，我们将 `offset` 的值应用到 `.parallax` 元素的 `transform` 属性中。通过调整 `delta * 0.2` 的值，可以控制滚动的速度。