当前位置：首页 > VUE

vue实现滚动监听

2026-02-10 21:25:58VUE

滚动监听的基本实现

在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;
      console.log('当前滚动位置:', scrollPosition);
    }
  }
}

使用Vue指令封装

通过自定义指令可以复用滚动监听逻辑，适合多处需要监听滚动的场景：

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

// 使用方式
<div v-scroll="handleScroll"></div>

节流优化性能

高频滚动事件可能影响性能，建议添加节流函数（如lodash的_.throttle）：

import { throttle } from 'lodash';

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

监听元素内部滚动

如需监听特定容器而非窗口的滚动，需获取DOM元素引用：

export default {
  data() {
    return {
      scrollContainer: null
    }
  },
  mounted() {
    this.scrollContainer = document.getElementById('scrollable-div');
    this.scrollContainer.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      console.log('容器滚动距离:', this.scrollContainer.scrollTop);
    }
  }
}

结合VueUse库

使用Composition API和工具库VueUse可以简化代码：

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

export default {
  setup() {
    const { y } = useScroll(window);
    watch(y, (newY) => {
      console.log('Y轴位置:', newY);
    });
    return { y };
  }
}

滚动方向判断

通过比较当前与上一次滚动位置可判断方向：

export default {
  data() {
    return {
      lastScrollPosition: 0
    }
  },
  methods: {
    handleScroll() {
      const current = window.pageYOffset;
      const direction = current > this.lastScrollPosition ? 'down' : 'up';
      this.lastScrollPosition = current;
      console.log('滚动方向:', direction);
    }
  }
}

滚动到特定位置

实现滚动到指定元素或位置的功能：

vue实现滚动监听

methods: {
  scrollToElement() {
    const element = document.getElementById('target');
    element.scrollIntoView({ behavior: 'smooth' });
  },
  scrollToTop() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
}

标签: vue