Question

I have a scrollable element with many children and a select tag with corresponding options.

I want to change the select’s value based on the elements .scrollTop()

How to do it efficiently? I thought about storing the children’s .offset().top in an array and looping throught it. However, the browser doesn’t handle it. I might try creating a .setTimeout() flag, but that doesn’t seem 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

How about what @osoner said + instead of doing all the calculation in the scroll even handler, you fire another event in the handler after an interval (e.g., ‘fooscroll’), and then you have all child elements subscribe to the event, and update themselves depending on conditions you set.

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...
});