Question

我正在尝试通过检查长滚动网站中当前活动的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')
    }
});

});

Answer 1

首先，您需要了解滚动事件每秒触发多次。将其与您用于搜索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/

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

IE和firefox表现不可预测地更新scroll（）上的location.hash

1 个答案: