Listening to JS.scroll () effectively

Question

I have a scrollable element with many children and a select tag with the appropriate parameters.

I want to change the value of an item based selection .scrollTop()

How to do it effectively? I was thinking about storing the children .offset().topin an array and scrolling through it. However, the browser cannot handle this. I could try creating a flag .setTimeout(), but that does not look clean.

    r = $('ul')
    offsets = []
    r.find('li').each((index) ->
      offsets[index] = $(this).offset().top
    )
    r.bind('scroll', ->
      // while loop checking .scrollTop() > offsets[n] is slow
      // maybe spams to many .scroll events?
    )

Answer 1

, @osoner +, , , (, "fooscroll" ), .

var scrollTimer;
$(window).on('scroll', function(e) {
    if (scrollTimer) { clearTimeout(scrollTimer); }
    scrollTimer = setTimeout(function() {
       $(window).trigger('fooscroll');
    }, 200);
});

$('li').on('fooscroll', function() {
    // Check scrollTop or whatever...
});

Answer 2

. , , .