編集ボックスに入力するWebkitブラウザでスクロールする

Question

WebKitブラウザ（Chrome & Safari）でウェブサイトのマークアップに問題があります。つまり、右のスライダーの編集ボックスに何かを入力すると、左の領域がスクロールします。 htmlコード（入力にid = "パレット" とdivの内側にある）

タイプクロームまたはSafariで

1. 開き、次のリンク -
   http://jsbin.com/obiyec/7
   http://jsbin.com/obiyec/7/edit：
   すると、次の例を見てみてください。右上の編集ボックスの内容
2. 左領域のスクロールバーが移動することに注意してください。

可能であればシフトからスクロールバーを防ぎ、それがFFであると、それは同じように動作させるためにどのよう

Q.根本このマークアップを変更することはほとんどありませんか？

Answer 1

ここで問題となるのは、自分が行っているように見え、実際に行っていることは2つの異なることです。

左側には固定幅のdivがあり、右側にはoverflow: auto（div#kb-board）の入力フィールドは無関係の要素ですが、そうではありません。入力フィールドは実際にはdiv#kb-boardの子ですが、その親（div#palette）の位置はfixedなので、ページの右上にあります。

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

この場合、Chromeは正しい動作を示しています。

これを解決するには、をネストすることを中止する必要があります。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