ハッシュ変更機能の例外 - ブラウザの履歴が戻っていますか？

Question

私はこの問題をどのように呼ぶべきかわかりません。この質問のタイトルは全く意味がありません。

次のケース：ユーザーが下にスクロールする1ページレイアウトです。私はセクション.layerを持っており、ビューポート内でアドレスバーのハッシュをidに変更する必要があります。だから.layer#oneは、アドレスバーのURLがこのwww.whatever.com/#!/one

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

これはうまく動作し、私はそれをしたい正確に似ているように見えますビューポート内にあります。私が!/でこの構文を使用している理由は、ブラウザがハッシュ位置に固執しようとするため、スクロール・ビヘイビアだけがバグであるという理由で、単に位置をhashに設定するだけです。

問題は今、私はブラウザの履歴を元に戻すボタンを作れるようにしたいと思っています！ これは通常

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

私はこれを持っている唯一の問題はスクロールしながらハッシュが変更された場合なhashchange機能もトリガーされるということです...ので、同じようにjQueryが付属しています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);