Vue3组件中Scroll Event Listener无法触发的问题排查

问题描述 #

开发Vue3组件时，通过onMounted给window添加滚动事件监听器，期望向下滚动超过50px时切换头部样式，但滚动页面时无任何控制台日志输出，isScrolled的值也没有变化。

组件简化代码如下：

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

const isScrolled = ref(false);

const handleScroll = () => {
  if (window.scrollY > 50) {
    isScrolled.value = true;
  } else {
    isScrolled.value = false;
  }
  console.log('isScrolled', isScrolled.value);
};

onMounted(() => {
  console.log('Mounted and adding scroll listener');
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  console.log('Removing scroll listener');
  window.removeEventListener('scroll', handleScroll);
});
</script>

已尝试操作 #

• 确认组件已正常挂载（控制台能输出Mounted and adding scroll listener）
• 将handleScroll简化为仅输出日志，仍未触发事件

解决方案 #

1. 验证页面是否存在滚动空间 #

如果页面内容高度小于视口高度，window不会产生滚动行为，自然触发不了滚动事件。可以临时给body设置最小高度来测试：

body {
  min-height: 200vh;
}

添加后尝试滚动页面，检查是否能触发日志输出。

2. 确认滚动事件绑定的目标元素 #

很多场景下，页面的滚动并非由window触发，而是某个带overflow: auto/scroll的内部容器。此时需要找到实际的滚动容器，将事件监听器绑定到该元素上：

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

const isScrolled = ref(false);
const scrollContainer = ref<HTMLElement | null>(null);

const handleScroll = () => {
  if (scrollContainer.value?.scrollTop > 50) {
    isScrolled.value = true;
  } else {
    isScrolled.value = false;
  }
  console.log('isScrolled', isScrolled.value);
};

onMounted(() => {
  console.log('Mounted and adding scroll listener');
  scrollContainer.value?.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  console.log('Removing scroll listener');
  scrollContainer.value?.removeEventListener('scroll', handleScroll);
});
</script>

<template>
  <div ref="scrollContainer" style="height: 100vh; overflow: auto;">
    <!-- 页面内容 -->
  </div>
</template>

3. 优化事件监听器的绑定选项 #

添加监听器时明确指定passive: true（滚动事件的最佳实践，提升性能且避免潜在的阻塞问题），同时确保没有其他代码意外移除了该监听器：

onMounted(() => {
  console.log('Mounted and adding scroll listener');
  window.addEventListener('scroll', handleScroll, { passive: true });
});

内容的提问来源于stack exchange，提问作者Aren Liu