3

私のプロジェクトの 1 つで、Google Chrome (v.18.0.1025.168 m) で奇妙な動作に遭遇しました。

Firefox、IE、Opera では問題なく動作しますが、Chrome では、ハッシュ アンカーへのリンクをクリックすると水平スクロールが正しく行われません。垂直スクロールは正常に機能しますが、水平スクロールは非常に悪いです。

要求された div が適切に表示されることもありますが、ほとんどの場合、div ブロックは視覚範囲の左または右にあります。

これは、次のコードで再現できます。左上固定メニューをクリックする: たとえば、上、左、右、右、右。

これが Chrome のバグなのか、何か見落としているのかわかりません。どう言う意味ですか？既知の回避策はありますか?

<!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>
4

2 に答える 2

2

リンクごとに、Javascript Jump-Function:: を呼び出す onclick を追加します。

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

JS:

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-04T21:56:02.163 に答える
0

ブラウザ間の動作の違いであることは間違いありませんが、これをバグと呼ぶには至りません。私の意見では、それを整理するのに適切な場所は Chrome サポート フォーラムです。

回避策については、多くの解決策がありますが、最も明白なのは、垂直スクロールに固執することです。自問すべき適切な質問は、「達成しようとしている機能と、どのような妥協を受け入れる意思があるか」です。

あなたが投稿した実装から、単一のページの読み込みにより多くの情報を追加し、さまざまなサブセクションをすばやく切り替えるための何かを探していると思います。本当に横スクロールが必要ですか？JavaScriptプラグインを使用していない理由はありますか? Jquery TabsとJquery Accordionが思い浮かびます。おそらく、同じことを実現するライブラリが他にもたくさんあるでしょう。

他に取り組んでいる制限がある場合は、遠慮なく投稿してください。解決策についてブレインストーミングを行うことができます。

于 2012-05-04T15:41:55.593 に答える