hashchange 函数的例外 - 浏览器历史记录回来了？

Question

我什至不知道我应该如何称呼这个问题......这个问题的标题根本没有任何意义，我知道！

以下情况：我有一个单页布局，用户向下滚动。我有部分.layer，当在视口内时，应该将地址栏中的哈希更改为id。所以例如.layer#one 在视口内地址栏中的 url 看起来像这样 www.whatever.com/#!/one

$(window).scroll(function() {       
    hash = $('.layer:in-viewport').attr('id');
    top.location.hash = "!/" + hash;
});

这很好用，完全符合我的要求。我使用!/ 使用这种语法的原因是，如果我只是将位置设置为hash，则只有滚动行为会出现错误，因为浏览器会尝试坚持哈希位置。

现在的问题是，我希望能够使浏览器历史记录返回按钮正常工作！ 使用 jQuery 附带的 hashchange 函数，这通常会相当简单……

$(window).bind( 'hashchange', function( event ) {
    //query the hash in the addressbar and jump to its position on the site
});

我遇到的唯一问题是，如果在滚动时更改哈希值，也会触发 hashchange 函数。所以它会再次跳转或停留在浏览器中的当前位置。知道如何解决这个问题吗？我可能可以在滚动时取消绑定 hashchange，对吧？但这是最好的解决方案吗？

Answer 1

当然，只要哈希值在滚动时发生变化，您就可以解除绑定并重新绑定。例如：

var old_hash;

var scroller = function() {       
    hash = $('.layer:in-viewport').attr('id');

    if ( old_hash != hash ) {
      $(window).off('hashchange', GoToHash); // using jQuery 1.7+ - change to unbind for < 1.7
      top.location.hash = "!/" + hash;

      setTimeout(function() { // ensures this happens in the next event loop
        $(window).on('hashchange', GoToHash);
      }, 0);

      old_hash = hash;
    }
}

var GoToHash = function() {
  //query the hash in the addressbar and jump to its position on the site
}

$(window).scroll(scroller);