高效收听 JS .scroll()答案

【问题标题】：Listening to JS .scroll() efficiently高效收听 JS .scroll()
【发布时间】：2012-02-20 07:32:27
【问题描述】：

我有一个带有许多子元素的可滚动元素和一个带有相应选项的选择标签。

我想根据元素.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?
    )

【问题讨论】：

标签： javascript jquery coffeescript

【解决方案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...
});

【讨论】：

我更喜欢这个（讨厌setInterval）。谢谢！
我是否正确地认为只有当用户停止滚动 200 毫秒时才会触发事件“fooscroll”？
@Simon：是的，你是对的。澄清一下，不，它不会“限制”滚动。如果您想每 200 毫秒触发一次滚动，而不是仅在用户完成滚动后触发一次，则必须以不同的方式进行。
谢谢您，先生。 clearTimeout 函数正是我正在寻找的，并且是我自己解决此问题的缺失部分，巧合的是，它与您的答案非常相似。

【解决方案2】：

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

【讨论】：