IE和Firefox的行为不可预测地更新位置

Question

我试图通过检查div当前在长滚动站点中处于活动状态来更新位置。这可以正常工作，这是Chrome，但在Firefox和IE中失败了。我已经用console.log和我能够在控制台中看到ID，但是一旦尝试将其馈入位置，滚动滚动就停止在页面上工作，或者不可预测地跳动！

！

$(window).scroll(function () {
$('div').each(function(){
    if (
      $(this).attr('class')=='article' && $(this).offset().top < window.pageYOffset + 10 
    && $(this).offset().top + $(this).height() > window.pageYOffset + 10
    ) {
       window.location.hash = $(this).attr('id')
    }
});
});

Answer 1

首先，您需要了解滚动事件每秒发射多次。将其与您用来搜索DOM的方法相结合...查找每个div，然后过滤所有所需的div s，并每秒钟多次执行此操作...您不必要地将浏览器超载。

在此简单的演示中滚动窗口，看看您的脚本要触发多久；http://jsfiddle.net/trx2p/

如果您要重复搜索DOM以搜索相同的元素，则将它们缓存到变量中将带来很大的性能提升。搜索DOM比搜索包含元素的缓存变量

要贵得多。

/* use jQuery selector that already filters out all the other `div` in page*/
var $articles= $('.article');
/* now use the variable inside your functions*/
$( window).scroll(function(){
    $articles.each(.....
    /* use the same cache principles for "$(this)" to help avoid needless function calls*/
})

现在，真正重要的部分是您应该将这些需要检查的次数。在用户仍在滚动时多次更新哈希没有好处...并使浏览器超载

这种对演示的修改仅在用户未滚动300ms滚动时会发射代码，这可能会增加到1/2秒甚至更多。它通过不断设置超时延迟来做到这一点http://jsfiddle.net/trx2p/2/

您现在应该能够将这些概念调整为您拥有的代码