Wie man alle Scroll-Ereignisse auf einer Seite erfasst, ohne einen onscroll-Handler an jedes einzelne Container anzuhängen

Question

Betrachten Sie die folgende Webseite:

Dieses HTML erstellt ein div mit einer Scrollleiste. Wenn Sie die Scrollleiste bewegen, wird das onscroll Ereignis des div-Elements ausgelöst. Jedoch wird das onscroll Ereignis des body NICHT ausgelöst. Das ist zu erwarten, da das W3C feststellt, dass Element-onscroll-Ereignisse nicht "blasen".

Ich entwickle jedoch ein clientseitiges Webframework, das jedes Mal informiert werden muss, wenn eine Scrollleiste eines beliebigen Elements der Seite gescrollt wird. Dies wäre einfach zu tun, wenn onscroll blasen würde, aber leider tut es das nicht. Gibt es einen anderen Weg, um onscroll-Ereignisse auf der gesamten Seite zu erkennen? (Derzeit 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 nicht für das Bewegen von Scrollleisten zu funktionieren.)
2. Verwendung von DOM-Beobachtern (scheinen auch nicht für Scrollleisten zu funktionieren)
3. Ändern des onscroll-Ereignistyps auf bubbeln (scheint nicht möglich zu sein)

Es scheint, dass der EINZIGE Weg, onscroll-Ereignisse global zu erfassen, darin besteht, ein onscroll-Ereignis an JEDES Element anzuhängen, das scrollen kann, was sehr hässlich ist und die Leistung meines Frameworks beeinträchtigen wird.

Weiß jemand einen besseren Weg?

Answer 1

Wie drcode gesagt hat, ist das Erfassen am body-Tag der Trick. Ich füge einfach touchmove hinzu, um auf mobilen Geräten zu funktionieren.

 document
      .querySelector("body")
      .addEventListener("mousewheel", e => {
        console.log("scroll");
      });

    document
      .querySelector("body")
      .addEventListener("touchmove", e => {
        console.log("scroll");
      });

Grüße,