How to capture all scrolling events on a page without attaching an onscroll handler to every single container

Question

Consider the following Web page:

Answer 1

I had this same issue.

The easiest way of course is to use jQuery. Be aware that this method could potentially slow down your page significantly. Also it will not account for any new elements that are added after the event is bound.

$("*").scroll(function(e) {
    // Handle scroll event
});

In vanilla JavaScript, you can set the useCapture boolean to true on your addEventListener call, and it will fire on all elements, including those added dynamically.

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

Note though that this will fire before the scroll event actually happens. As I understand it, there's two phases events go through. The capture phase happens first, and starts from the page root (ownerDocument?) and traverses down to the element where the event happened. After this comes the bubbling phase, which traverses from the element back up to the root.

Some quick testing too showed that this may be how jQuery handles it (for tracking scrolls on all page elements at least), but I'm not 100% sure.

Here's a JSFiddle showing the vanilla JavaScript method http://jsfiddle.net/0qpq8pcf/