如何为非受控动态生成元素绑定不支持冒泡的scroll滚动事件

方案1：使用MutationObserver监听DOM变动（推荐） #

这是性能最优、精准度最高的方案，直接监听原有滚动元素的父节点变化，SSB生成的滚动容器插入DOM后会立刻触发回调完成事件绑定：

// 替换为你自己的目标滚动元素选择器
const targetEl = document.querySelector('.element');
const observer = new MutationObserver(() => {
  const scrollContainer = targetEl.parentNode;
  // 可根据SSB生成容器的实际类名调整判断条件，SSB默认生成的容器类为ssb-container
  if (scrollContainer?.classList.contains('ssb-container')) {
    scrollContainer.addEventListener('scroll', handler);
    // 绑定完成后销毁监听器避免性能损耗
    observer.disconnect();
  }
});
// 监听目标元素所在父节点的DOM变化
observer.observe(targetEl.parentElement, {
  childList: true,
  subtree: true
});

方案2：利用捕获阶段监听滚动事件 #

scroll事件默认不支持冒泡，但支持在捕获阶段触发，可直接在全局监听捕获阶段的scroll事件，匹配目标容器后触发回调：

document.addEventListener('scroll', (e) => {
  // 判断滚动目标是否为SSB生成的容器，或容器内包含你的目标元素
  if (e.target.querySelector?.('.element') || e.target === document.querySelector('.element')?.parentNode) {
    handler();
  }
}, true); // 第三个参数设为true开启捕获模式

方案3：定时轮询检测（简单兜底） #

如果项目规模小、不想写复杂的监听逻辑，可以用短间隔轮询检测容器是否存在，实现成本极低：

const checkTimer = setInterval(() => {
  const scrollContainer = document.querySelector('.element')?.parentNode;
  if (scrollContainer) {
    scrollContainer.addEventListener('scroll', handler);
    clearInterval(checkTimer);
  }
}, 100); // 100ms检测一次，对页面性能影响极小

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