Escuchar JS .scroll() de manera eficiente

Question

Tengo un elemento desplazable con muchos elementos secundarios y una etiqueta de selección con las opciones correspondientes.

que quieren cambiar el valor del selecto sobre la base de los elementos .scrollTop()

Cómo hacerlo de manera eficiente? Pensé en almacenar el .offset().top de los niños en una matriz y recorrerlo. Sin embargo, el navegador no lo maneja. Podría intentar crear una bandera .setTimeout(), pero eso no parece limpio.

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

¿Qué tal lo que dijo @osoner + en lugar de hacer todos los cálculos en el controlador de desplazamiento uniforme, desencadena otro evento en el controlador después de un intervalo (por ejemplo, 'fooscroll') y luego tiene todos los elementos secundarios suscritos a el evento, y se actualizan en función de las condiciones que establezca.

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

Debe leer this suggestion from John Resig. Básicamente establece un indicador cada vez que el usuario se desplaza y realiza la acción que desea con una función de intervalo que verifica este indicador.