4

配置/サイズoverflow:auto設定され、スクロールバーを表示するために使用するコンテンツラッパーのサブセクションへのリンクを含むHTMLページがあります。サブセクションへのリンクは機能しますが（コンテンツが正しい高さまでスクロールするため） 、Firefox v13、IE v9、またはOpera v11では[戻る]ボタンを使用しても正しいセクションに再スクロールされません（Chromev20およびSafariv5では機能します） ）。

CSSを大幅に変更することはできません（配置され、サイズが変更され、オーバーフローするコンテンツを使用する必要があります）。この問題を回避するにはどうすればよいですか？

JavaScript / jQueryを含むソリューションは受け入れられますが、単純なCSS修正が望ましいです。

テストページ：phrogz.net/tmp/backing…containers.html

<!DOCTYPE html>
<html><head><title>Backing into Subpage Anchors in Overflowed Containers</title>
  <style type="text/css">
    #site-nav { position:fixed; width:10em; top:0; left:0 }
    #contents { position:fixed; top:3em; bottom:5em; left:11em; right:0;
                overflow:auto; background:#fed }
    div            { height:15em }
    div:last-child { height:55em }
  </style>
</head><body>

<article id="contents">
  <div>
    <h1 id="a">Section A</h1>
    <p>Navigate to the different sections at left, and then press the Back button.</p>
  </div>
  <div><h1 id="b">Section B</h1></div>
  <div><h1 id="c">Section C</h1></div>
</article>
<ul id="site-nav">
  <li><a href="#a">Section A</a></li>
  <li><a href="#b">Section B</a></li>
  <li><a href="#c">Section C</a><ul>
</ul>

</body></html>

以前に提出されたFirefoxのバグ：https
：//bugzilla.mozilla.org/show_bug.cgi？id = 391664 Operaのバグとして参照：DSK-365451@bugs.opera.com

4

3 に答える 3

2

これは、jQuery、@ bariusによって提案されたhashchangeプラグイン、および次のコードを使用して解決しました。

jQuery(function($){
  var $content = $('#contents');
  $(window).hashchange(scrollHashIntoView);

  function scrollHashIntoView(){
    // Ensure that the ID I'm looking for is within my scrolling content
    var offset = $content.find(location.hash).offsetRelativeTo($content);
    $content.scrollTop( offset ? offset.top : 0 );
  }
});

// Find the offset of an element relative to some ancestor
jQuery.fn.offsetRelativeTo = function(el){
  var $el=$(el), o=this.offset(), o2=$el.offset();
  if (o){
    o.top  -= o2.top  - $el.scrollTop();
    o.left -= o2.left - $el.scrollLeft();
  }
  return o;
}

offsetRelativeTo()サブアンカーの1つがたまたまposition:relative親の内部にあった（それ自体がスクロールコンテンツの内部にあった）私のより複雑なケースでは、コードが必要でした。

（a）動作を自己文書化scrollHashIntoView()するのに役立ち、（b）必要に応じて個別に呼び出すことができ、（c）作業の実装を簡潔なイベント登録から分離し、彼らの行動。

より堅牢なソリューション（ネストされたスクロール領域のありそうもないが可能性のあるケースを処理する）は、IDを見つけて、offsetParentsのツリーを上に移動し、必要に応じてそれぞれをスクロールして表示します。

于 2012-06-06T18:21:23.613 に答える
1

onhashchangeイベントを使用できると思います。新しいブラウザでのみサポートされていますが、 http： //benalman.com/projects/jquery-hashchange-plugin/などのプラグインを利用できます。

ハッシュが変更されると、IDで要素を検索し、コンテナーのscrollTop属性を変更できます。このようなもの：

$(function(){
    $(window).hashchange(function(){
        var elem = $(location.hash);
        if (elem.count() > 0) {
            elem.offsetParent().animate({scrollTop: elem.position().top});
        }
    });
});
于 2012-06-06T17:21:17.003 に答える
-1

私もこのonhashchangeイベントをお勧めするつもりでしたが、古いブラウザではサポートされていません。簡単な解決策は、ページの最初のアンカーのハッシュを使用し、ハッシュがない場合は自動的にそれに設定することです。

$(function() {
    if(window.location.hash == '') {
        window.location.hash = $("a[href^='#']:first").attr('href');
    }
});
于 2012-06-06T17:35:58.697 に答える