Como capturar todos os eventos de rolagem em uma página sem anexar um manipulador onscroll a cada único contêiner
Considere a seguinte página da Web:
<html>
<body onscroll="alert('body scroll event')">
<div style='width:200px;height:200px;overflow:auto' onscroll="alert('div scroll event')">
<div style='height:400px'>
</div>
</div>
</body>
</html>
Este html cria um div com uma barra de rolagem. Se você mover a barra de rolagem, o evento "onscroll" no elemento div será acionado. No entanto, o evento "onscroll" no corpo NÃO é disparado. Isso é esperado, uma vez que o W3C declara que os eventos do elemento onscroll não "borbulham".
No entanto, estou desenvolvendo uma estrutura da Web do lado do cliente que precisa saber sempre que uma barra de rolagem em QUALQUER elemento da página for rolada. Isso seria fácil de fazer se "onscroll" borbulhar, mas infelizmente isso não acontece. Existe alguma outra maneira de detectar eventos do onscroll em uma página inteira? (No momento, estou focando principalmente no Webkit, então uma solução específica para Webkit seria boa ...)
Aqui estão algumas coisas que eu tentei: 1. Capturar DOMAttrModified (não parece disparar para mover barras de rolagem). 2. Usando DOM Observers (também não parecem disparar para barras de rolagem) 3. Alterando o tipo de evento "onscroll" borbulhar (parece não ser possível)
Parece que a única maneira de capturar eventos onscroll globalmente é anexar um evento onscroll a todos os elementos que podem rolar, o que é muito feio e vai prejudicar o desempenho do meu framework.
Alguém sabe de uma maneira melhor?
Desde já, obrigado!