当必须在页面上加载图像时，机车滚动不能与Vue.js一起工作

<template>
  <div>
    <div class="parallax" v-bind:style="{ backgroundPosition: bgPosition }"></div>
    <div class="content">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bgPosition: '0px 0px' // 初始背景位置
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      // 根据滚动位置计算背景位置
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.bgPosition = `0px ${scrollTop / 2}px`; // 调整背景移动速度
    }
  }
};
</script>

<style>
.parallax {
  background-image: url('path/to/image.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0px 0px;
  width: 100%;
  height: 100vh; /* 根据需要调整容器高度 */
}

.content {
  /* 页面内容样式 */
}
</style>