0

我正在尝试通过检查长滚动站点中当前活动的 div 来更新 location.hash。这工作正常是 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')
    }
});

});
4

1 回答 1

2

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

在这个简单的演示中滚动窗口，查看脚本触发的频率；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*/
})

现在真正重要的部分是你应该减少每秒需要检查的次数。在用户仍在滚动时多次更新哈希没有任何好处......并重载浏览器来执行此操作

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

您现在应该能够使这些概念适应您拥有的代码

于 2012-11-05T03:45:52.923 回答