hashchange函數的異常 - 瀏覽器歷史記錄回來？

Question

我不知道我該怎麼稱呼這個問題......這個問題的標題根本沒有任何意義，我知道！

以下情況：我有單頁佈局，用戶向下滾動。我有部分.layer，它們在視口內時應將地址欄中的散列值更改爲其id。所以例如該.layer#one是視內部在地址欄的網址看起來像這樣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);