Question

我有一个包含许多子项的可滚动元素和一个带有相应选项的select标记。

我想根据元素.scrollTop()

更改选择的值

如何有效地做到这一点？我想过将孩子们的.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?
    )

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

您应该阅读this suggestion from John Resig。基本上，每次用户滚动时都会设置一个标志，并使用检查此标志的间隔函数执行所需的操作。

有效地听JS .scroll（）

2 个答案: