在Vuejs中观看window.scrollY变化

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      console.log(window.scrollY);
      // 根据滚动位置执行相应逻辑
    }
  }
}
</script>

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const handleScroll = () => {
      console.log(window.scrollY);
      // 根据滚动位置执行相应逻辑
    };

    onMounted(() => {
      window.addEventListener('scroll', handleScroll);
    });

    onBeforeUnmount(() => {
      window.removeEventListener('scroll', handle.vueScroll);
    });
  }
}
</script>

import { throttle } from 'lodash';

export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll: throttle(function() {
      console.log(window.scrollY);
      // 根据滚动位置执行相应逻辑
    }, 200) // 每200毫秒执行一次
  }
}

handleScroll() {
  const scrollY = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
  console.log(scrollY);
  // 根据滚动位置执行相应逻辑
}