Erfassen aller Bildlaufereignisse auf einer Seite, ohne jedem einzelnen Container einen Onscroll-Handler hinzuzufügen
Betrachten Sie die folgende Webseite:
<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>
Dieser HTML-Code erstellt ein Div mit einer Bildlaufleiste. Wenn Sie die Bildlaufleiste verschieben, wird das Ereignis "onscroll" für das div-Element ausgelöst. Das "Onscroll" -Ereignis auf dem Körper wird jedoch NICHT ausgelöst. Dies wird erwartet, da das W3C angibt, dass Element-Onscroll-Ereignisse nicht "sprudeln".
Ich entwickle jedoch ein clientseitiges Webframework, das wissen muss, wann immer eine Bildlaufleiste auf einem beliebigen Element der Seite gescrollt wird. Dies wäre einfach zu tun, wenn "onscroll" sprudelte, aber leider nicht. Gibt es eine andere Möglichkeit, Onscroll-Ereignisse auf einer ganzen Seite zu erkennen? (Im Moment konzentriere ich mich hauptsächlich auf Webkit, daher wäre eine Webkit-spezifische Lösung in Ordnung ...)
Hier sind einige Dinge, die ich ausprobiert habe: 1. Erfassen von DOMAttrModified (scheint beim Verschieben von Bildlaufleisten nicht ausgelöst zu werden.) 2. Verwenden von DOM Observers (scheint auch beim Verschieben von Bildlaufleisten nicht ausgelöst zu werden) 3. Ändern des Ereignistyps "Onscroll" sprudeln (scheint nicht möglich zu sein)
Es scheint, dass die EINZIGE Möglichkeit, Onscroll-Ereignisse global zu erfassen, darin besteht, ein Onscroll-Ereignis an JEDES Element anzuhängen, das möglicherweise gescrollt wird. Dies ist sehr hässlich und beeinträchtigt die Leistung meines Frameworks.
Kennt jemand einen besseren Weg?
Danke im Voraus!