如何在React中为指定div内的所有元素添加onScroll事件监听器？

核心实现思路 #

通过DOM选择器定位目标容器，批量获取其内部所有后代元素，再循环为每个元素绑定scroll事件监听器。

基础实现代码 #

// 获取目标父容器
const parentContainer = document.querySelector('.add-event-listener-to-every-element-in-me');
// 获取容器内所有后代元素（包含嵌套层级）
const allChildElements = parentContainer.querySelectorAll('*');

// 定义scroll事件处理逻辑
function handleElementScroll() {
  // 替换为你的业务逻辑
  console.log(`滚动元素: ${this.tagName}.${this.className}`);
}

// 批量绑定事件
allChildElements.forEach(element => {
  element.addEventListener('scroll', handleElementScroll);
});

性能优化（可选） #

并非所有元素都能触发scroll事件，只有设置了overflow: scroll/auto且内容超出容器范围的元素才会生效。可以先判断元素是否可滚动，再绑定事件：

// 判断元素是否可滚动
function checkIfScrollable(element) {
  const computedStyle = window.getComputedStyle(element);
  const verticalScrollable = (computedStyle.overflowY === 'scroll' || computedStyle.overflowY === 'auto') 
    && element.scrollHeight > element.clientHeight;
  const horizontalScrollable = (computedStyle.overflowX === 'scroll' || computedStyle.overflowX === 'auto') 
    && element.scrollWidth > element.clientWidth;
  return verticalScrollable || horizontalScrollable;
}

// 仅给可滚动元素绑定事件
allChildElements.forEach(element => {
  if (checkIfScrollable(element)) {
    element.addEventListener('scroll', handleElementScroll);
  }
});

移除事件（可选） #

若后续需要移除事件监听器，需确保使用同一个函数引用：

allChildElements.forEach(element => {
  element.removeEventListener('scroll', handleElementScroll);
});

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