Listening to all scroll events on a page

Question

Background:

I\'m writing a component that opens up a sub-menu on click. I can\'t know where this component will be placed on the page or how far it will

Answer 1

The best way to do it would be to find out which elements are scrollable, then attach listeners to them. You could run this function on any page change to make sure you've always got all the scrollables.

This is a benefit over using listeners on every element (as the other solutions would do) in terms of performance: every time the page updates so do the listeners. With lots, this quickly affects performance and memory use.

The updated fiddle: http://jsfiddle.net/ArtOfCode/wAadt/8/

The code:

$("*").each(function() {
    if($(this).css("overflow") == "auto" || $(this).css("overflow") == "scroll") {
        $(this).scroll(function() {
            console.log("scroll");
        });
    }
});

(thanks to @pebbl for the help)

You could then wrap this in a function and run it on change:

function addListeners() {
    $("*").each(function() {
        if($(this).css("overflow") == "auto" || $(this).css("overflow") == "scroll") {
            $(this).css('border', '1px solid red').scroll(function() {
                console.log("scroll");
            });
        }
    });
}

$("body").on("change",function()
    addListeners();
}

Admittedly it is a bit convoluted but it addresses the issue with as few event listeners as possible.