javascript - 有效地监听JS .scroll()

我有一个带有许多子元素的可滚动元素，以及一个带有相应选项的select标记。

我想根据元素.scrollTop()更改选择的值

如何有效地做到这一点？我考虑过将 child 的.offset().top存储在数组中并循环遍历。但是，浏览器无法处理它。我可能会尝试创建.setTimeout()标志，但这似乎并不干净。

    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?
    )

最佳答案

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

关于javascript - 有效地监听JS .scroll()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9353959/