8

WebKitブラウザ（ChromeとSafari）でのWebサイトのマークアップに問題があります。つまり、右スライダーの編集ボックスに何かを入力すると、左側の領域がスクロールします。

次の例を見てください。http：//jsbin.com/obiyec/7 http://jsbin.com/obiyec/7/edit
--html コード（入力はid = "palette"のdiv内にあります）

  1. ChromeまたはSafariで次のリンクを開く
  2. 右上隅の編集ボックスに何かを入力します
  3. 左側のスクロールバーが移動することに注意してください

可能であれば、このマークアップを根本的に変更することはほとんどありません。

Q.スクロールバーが移動しないようにして、FFの場合と同じように動作させるにはどうすればよいですか？

4

1 に答える 1

6

ここでの問題は、あなたがしているように見えることと、実際にしていることは 2 つの異なることです。

div固定幅の左側のoverflow: auto( div#kb-board) と右側の入力フィールドは無関係な要素のように見えますが、そうではありません。入力フィールドは実際には の子ですdiv#kb-boardが、その親 ( div#palette) にはfixed配置があるため、ページの右上に配置されます。

その結果、入力フィールドは実際には の右側にあり、入力するdiv#kb-boardとスクロール バーが移動し、その div の右側にフォーカスが移ります。

したがって、この場合、Chrome は正しい動作を示していると言えます。

これを解決するには、div#palette内でのネストを停止する必要がありますdiv#kb-board。固定位置を使用するため、ネストする必要はありません。

<div id="kb-board">
    <div id="boards-container">
        <div id="lane">...</div>
    </div>
    <!-- div#palette was originally here -->
</div>
<div id="palette">
    <input type="text" value="Type here" />
</div>

作業例: http://jsbin.com/obiyec/8

于 2012-07-08T15:47:05.907 に答える