Google Chromeのハッシュアンカーへのリンクをクリックすると、水平スクロールが正しく行われない

私のプロジェクトの1つで、Google Chrome（バージョン18.0.1025.168 m）で奇妙な動作が発生しました。Google Chromeのハッシュアンカーへのリンクをクリックすると、水平スクロールが正しく行われない

Firefoxでは、Operaはすべてうまく動作しますが、Chromeではハッシュアンカーへのリンクをクリックすると正しくない水平スクロールが発生します。垂直スクロールは正常ですが、水平は非常に悪いです。

時々、要求されたdivがうまく表示されますが、ほとんどの場合、divブロックは視野範囲の外側または右側にあります。

これは次のコードで再現できます。トップレフ固定メニューをクリックすると、上、左、右、右、右などが表示されます。

これはChrome-Bugかわかりませんが、何か見落としていますか？どういう意味ですか？既知の回避策はありますか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Google-Chrome don't follows anchors properly - incorrect horizontal scrolling</title> 
<style type="text/css"> 
body 
{ 
    min-width: 700px; 
    overflow: auto; 
} 

div 
{ 
    position: absolute; 
    width: 400px; 
    height: 300px; 
    z-index: 1; 
    padding-left:160px; 
} 

#top 
{ 
    border: 1px solid black; 
    top:0px; 
    left: 400px; 
    background: gray; 
} 

#left 
{ 
    border: 1px solid blue; 
    left:0px; 
    top: 400px; 
    background:#00d; 
} 

#right 
{ 
    border: 1px solid orange; 
    left:800px; 
    top: 800px; 
    background: yellow; 
} 
#moreright 
{ 
    border: 1px solid red; 
    left:1600px; 
    top: 1500px; 
    background:#d00; 
} 

div#fixedmenu 
{ 
    position: fixed; 
    top:0; 
    left: 0; 
    width: 150px; 
    height: 150px; 
    background: #ddd; 
    border: 1px solid gray; 
    z-index: 2; 
    margin: 0; 
    padding:0; 
} 

</style> 
</head> 
<body> 
<div id="top" >top</div> 
<div id="left">left</div> 
<div id="right">right</div> 
<div id="moreright">moreright</div> 

<div id="fixedmenu"> 
    <ul> 
     <li><a href="#top">top</a></li> 
     <li><a href="#left">left</a></li> 
     <li><a href="#right">right</a></li> 
     <li><a href="#moreright">moreright</a></li> 
    </ul> 
</div> 
</body> 
</html>

出典

2012-05-03 code_angel

だけスタックオーバーフローのための 'hash'タグは、一般にハッシュ関数http://en.wikipedia.org/wiki/Hash_functionのコンピュータサイエンスの概念を指します。あなたは 'anchor'タグを持っています:-) –

私はクロムでJSFiddleでこれを試してみましたが、水平スクロールがどの方向から来るのかが関係しているようです。 #leftアンカーと#morerightアンカーはスクロールバーをウィンドウの両側に固定しているので、#rightアンカーに移動するとスクロールバーが動かず、これはfirefox 3.6の動作とは大きく異なります。 FFは、スクロールバーを常に配置して、div全体が表示されるようにします。見て、それがあなたが見ているものなら、私に教えてください：http://jsfiddle.net/jBf3y/ –

はい、これは私が話していることです。出力水平位置は水平着地位置に影響します。同じ結果を得るには、同じ一連のクリックをテストすることが重要です。document.documentElement.clientWidth/window.innerWidthも重要な要素です。 –

、：

function jump(element_id) 
{ 
     var d = document.getElementById(element_id); 

     var gx = d.offsetLeft; 
     var e = d; 
     if (d.offsetParent) while (e = e.offsetParent) gx += e.offsetLeft; 

     var gy = d.offsetTop; 
     var e = d; 
     if (d.offsetParent) while (e = e.offsetParent) gy += e.offsetTop; 

     window.scrollTo(gx,gy); 

}

...と水平スクロール、Chromeの動作中に...

出典

2012-05-04 21:56:02

ブラウザ間の動作の違いは間違いありませんが、私はバグとは言いません。それを整理するために行く正しい場所は、私の意見ではthe Chrome Support Forumsとなるでしょう。

回避策としては、多くのソリューションがありますが、最も顕著なのは垂直スクロールに固執することです。あなた自身に尋ねる適切な質問は、「達成しようとしている機能は何か、どのような妥協点が受け入れられるか」ということです。

あなたが投稿した実装からは、1ページの読み込みに多くの情報を入れ、さまざまなサブセクション間を素早く移動する方法を探していると思います。あなたは本当に水平にスクロールする必要がありますか？ JavaScriptプラグインを使用していない理由はありますか？ Jquery Tabsのように、Jquery Accordionのようになります。おそらく、同じことを達成する他の多くのライブラリがあります。

作業している他の制限事項がある場合は、お気軽に投稿してください。 Javascriptをジャンプ-機能::

<a href="#moreright" onclick="jump('moreright')">moreright</a>

JS呼び出すonclickを追加し、各リンクの場合

出典

2012-05-04 15:41:55

パトリックさんにあなたの提案をありがとうございます。私はすでにこれをバグとして報告しています。しかし、将来はいつか修正される予定です。今私は解決策が必要です。私はページのコンセプトを変更しません。それは大きな「地図」のようなページでなければなりません。私はJavaScriptを介してスクロールを処理します。解決策は途中です... –

私は連続した情報のページを考えていませんでした。これは、アクセスしやすく、ナビゲートしやすい地図を作成するための非常に巧妙な方法です。誰かがそれに何かを実装しているのだろうかと思います。運が良ければ、jsの実装を見つけたら投稿してください！ –

Google Chromeのハッシュアンカーへのリンクをクリックすると、水平スクロールが正しく行われない

答えて

関連する問題