1

この問題をどう呼べばいいのかわかりません… この質問のタイトルはまったく意味がありません。

次のケース: ユーザーが下にスクロールする単一ページのレイアウトがあります。.layerビューポート内でアドレスバーのハッシュを に変更する必要があるセクションがありidます。たとえば、.layer#oneビューポート内にある場合、アドレスバーの URL は次のようになります www.whatever.com/#!/one

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

これはうまく機能し、私が望んでいるものとまったく同じです。でこの構文を使用する理由は!/、場所を単純hashにスクロール動作のみに設定すると、ブラウザーがハッシュ位置に固執しようとするため、バグが発生するためです。

問題は、ブラウザの履歴に戻るボタンを機能させたいということです。これは通常hashchange、jQuery に付属の関数を使用するとかなり単純になります。このように…</p> 

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

これに関する唯一の問題は、スクロール中にハッシュが変更されると、hashchange 関数もトリガーされることです。そのため、ブラウザの現在の位置に再びジャンプまたはスティックします。どうすればこれを解決できますか？スクロール中にハッシュチェンジのバインドを解除できるのではないでしょうか。しかし、これは最善の解決策ですか？

4

1 に答える 1

2

確かに、スクロール時にハッシュが変更されるたびに、バインドを解除して再バインドすることができます。例えば：

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);
于 2012-01-03T21:51:19.570 に答える