为何window的scroll事件监听器失效？未知滚动块时如何处理？

问题核心原因很明确：window的scroll事件仅在浏览器视口本身发生滚动时触发。当页面内某个元素设置了overflow: auto/scroll属性时，滚动行为发生在该元素内部，触发的是这个元素自身的scroll事件——而scroll事件默认不会冒泡到window，所以你给window添加的监听器自然不会生效。

如果不知道具体的滚动元素类名或ID，可以用以下两种方法解决：

方法一：利用事件捕获机制全局监听scroll事件 #

scroll事件虽然不冒泡，但可以通过事件捕获阶段监听所有元素的滚动行为，然后手动触发window的scroll事件，让原有监听器生效：

// 在捕获阶段监听所有元素的scroll事件
document.addEventListener('scroll', () => {
  // 手动触发window的scroll事件
  window.dispatchEvent(new Event('scroll'));
}, true); // 第三个参数true开启捕获模式

// 你的原有window监听器
window.addEventListener('scroll', () => {
  console.log('scroll!');
});

方法二：直接在捕获阶段处理逻辑 #

如果不需要刻意触发window的scroll事件，也可以直接把逻辑写在捕获阶段的监听回调里，更简洁：

document.addEventListener('scroll', () => {
  console.log('scroll!');
}, true);

完整代码示例 #

整合你提供的代码，最终实现如下：

HTML #

<main>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</main>

CSS #

* {
  margin: 0;
  padding: 0;
}

main {
  height: 100vh;
  overflow-y: auto;
}

div {
  width: 500px;
  height: 300px;
  margin: 10px 0;
  background: rgb(45, 62, 206);
}

JavaScript #

document.addEventListener('scroll', () => {
  window.dispatchEvent(new Event('scroll'));
}, true);

window.addEventListener('scroll', () => {
  console.log('scroll!');
});

现在滚动页面内的<main>元素时，window的scroll监听器就会正常触发，打印出scroll!。

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