如何监听页面里所有可滚动元素的滚动事件

要在网页中监听所有可滚动元素的滚动事件，可以使用事件代理（Event Delegation）的概念。这种技术允许你在顶级容器上绑定一个事件处理器，然后通过检查事件源来确定哪个滚动元素实际触发了该事件。以下是使用JavaScript的基本步骤：

1. 首先，选择一个通用的祖先元素，例如文档的body或window对象，它们肯定包含所有可滚动元素。

document.body.addEventListener('scroll', handleScroll, { passive: true });

2. 在事件处理器函数`handleScroll`内部，通过`event.target`获取到触发滚动的元素。如果这个元素不是滚动区域（比如`<div style="overflow: auto;">`），则进一步检查其是否存在子元素满足滚动条件。

function handleScroll(event) {
  if (event.target.scrollHeight > event.target.clientHeight) { // 判断是否可滚动
    console.log('滚动事件在:', event.target);
    // 进行你需要的操作
  }
}

通过这种方法，你只需监听一个全局事件，就能处理所有可滚动元素的滚动事件，节省了大量的事件监听器创建。