元素是否可以溢出：将气泡滚动到文档？

Question

我正在尝试将滚动侦听器添加到具有overflow-y: scroll

的元素中

将侦听器添加到窗口不起作用。如果您有元素：

<div id='my-div'>my div</div>

具有样式：

#my-div {
  overflow-y: scroll
}

在div中滚动时，以下JavaScript不会触发：

window
  .addEventListener('scroll', function() {
    console.log('do something on scroll')
  })

这似乎是因为出于性能考虑，滚动事件不会发生冒泡。

相反，建议您直接附加滚动事件：

document
  .getElementById('my-div')
  .addEventListener('scroll', function() {
    console.log('do something on scroll')
  })

但是，从必须将引用传递给应用程序周围的元素的角度来看，这可能是个问题。在我的应用程序（正在使用React的应用程序中，尽管这同样适用于使用W3C文档规范的任何应用程序），为了获得对设置了overflow的元素的引用，存在多层嵌套。有没有一种方法可以避免必须传递引用？

Answer 1

似乎很简单，只需为true的第三个参数添加addEventListener即可捕获所有Elements中的事件。喜欢：

document.addEventListener('scroll', function(e){ }, true);

还有另一个问题可以更详细地解决此问题：Listening to all scroll events on a page