How to determine which element scrolled?

[jgarbers]

I have three different areas on my page, each of which I would like to have scroll endlessly. It seems natural to do something like

$('.scrollable-area').endlessScroll({...})

since each of the areas has the "scrollable-area" class. If I do that, though, how can I tell at callback time which one scrolled so I can update its data? In my testing in Safari, at least, 'this' on the callback includes the set of all three areas.

[fredwu]

In this case, you would want to use an id instead of a class as the selector. :)

[jgarbers]

That's what I've started with, but I thought there might be a way to avoid the redundant code. Thanks for the help and the great code, Fred!

[fredwu]

Not a problem. :) Just a quick explanation: as you assigned endlessScroll to a class, the same instance is now attached to three scrollable areas. What you want is to have a different instance assigned to each area. Hope that makes sense.

[jgarbers]

Ah, thanks for the clarification. Here's what I ended up with:

$('.scrollable-area').each(function(index, el) {
    $(el).endlessScroll({
        callback: function() { scroll_area(el); },
    });

This way I have a separate endlessScroll for each element, as you suggested, plus I can pass the affected element to my callback.

[fredwu]

Nice one! :+1: