当前位置：首页 > VUE

vue实现滚动监听

2026-01-08 06:26:02VUE

滚动监听的基本实现

在Vue中实现滚动监听可以通过原生JavaScript的window.addEventListener或结合Vue的生命周期钩子完成。以下是一个基础示例：

export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
      console.log('当前滚动位置:', scrollPosition);
    }
  }
}

使用Vue自定义指令

通过自定义指令可以复用滚动监听逻辑，适合多个组件需要相同行为的情况：

vue实现滚动监听

Vue.directive('scroll', {
  inserted(el, binding) {
    const callback = binding.value;
    window.addEventListener('scroll', callback);
  },
  unbind(el, binding) {
    const callback = binding.value;
    window.removeEventListener('scroll', callback);
  }
});

// 组件中使用
<template>
  <div v-scroll="handleScroll"></div>
</template>

滚动节流优化

高频滚动事件可能影响性能，建议添加节流控制：

vue实现滚动监听

import { throttle } from 'lodash';

export default {
  methods: {
    handleScroll: throttle(function() {
      console.log('节流后的滚动位置:', window.scrollY);
    }, 200)
  }
}

监听元素内部滚动

需要监听特定容器而非窗口时，使用元素的事件监听：

export default {
  mounted() {
    this.$refs.container.addEventListener('scroll', this.handleContainerScroll);
  },
  methods: {
    handleContainerScroll(event) {
      console.log('容器滚动位置:', event.target.scrollTop);
    }
  }
}

结合VueUse库实现

使用工具库如@vueuse/core可以简化实现：

import { useWindowScroll } from '@vueuse/core';

export default {
  setup() {
    const { y } = useWindowScroll();
    watch(y, (newY) => {
      console.log('实时滚动位置:', newY);
    });
  }
}

标签: vue