クロムのスクロールを止めてセレクトにフォーカスするにはどうすればいいですか

Question

私は2つのマルチセレクトリストを持ち、お互いに移動できるアイテムのコレクションを持っています。

1の内容または両方のリストは、私がする項目自体を希望よりも広くなり、次のように私はそれらをそれぞれ二つのdivタグを選択で表現しているという可能性があります：

<div class="container"> 
    <div class="concealer"> 
     <select size="4"> 
      ... 
     </select> 
    </div> 
</div> 

は、

div内にselectを置くと、水平スクロールが可能になります（selectはそうでないため）。選択項目のサイズが変更され（サイズ属性が設定されます）、項目の追加または削除時にその内容に合わせられます。 「concealer」divは、ダブルスクロールバーがセレクトの垂直スクロールバーを隠すことを避け、セレクトも同様に変更された場合は垂直サイズにします。

私はhtml5を使用しています。 IE9の標準モードとFirefoxは問題ありません。私が持っている問題は、Chrome（実際にはSafariでも同様です...ウェブキット）です。コントロールがウィンドウやコンテナ（たとえばdiv）に垂直スクロールしていて、選択範囲の上部が表示されないポイントまでスクロールしている場合、選択範囲の下部が表示されている場合オーバーフローが見られる場合は外側のコンテナに表示されます）、選択項目内の項目をクリックしてフォーカスを合わせると、外側のコンテナが上端または選択範囲の上端までスクロールされますあなたがそれを含むdivを通してそれを見ることができれば見えます。

前述したように、selectの最下部のオプションが（含む）ウィンドウに表示され、selectの上部が表示されない場合、chromeがスクロールします。私は私のステージング環境と本番環境では、クロムによって行われている調整でもあることを発見していた以外は、私は、戻って現在の位置までスクロールウィンドウのscrollTopスプライトを調整するためのスクリプトを書いて、は仕事であろうとしている

実際のオプションの選択は、クロムが独自の調整を行った後に起こります。つまり、誤ったオプション（ブラウザーが上にスクロールしていてもオフになっています）にクリックレジスタが登録されていることを意味し、選択肢にonfocusイベントがあるかどうかは問題です。

このようなベアボーンテストでは、オプションの選択問題を発生させることはできませんでしたが、スクロール自体は問題です。

これを防ぐために私が見つけた唯一の方法は、選択した井戸の底部を外側のコンテナの底部に置くのに十分な大きさの数字にサイズを変更することですが、これは全く理想的ではありません多くの空白を残すため、ユーザーエクスペリエンスが悪く、（かなり深刻ですが）Webkitにのみ影響する問題に対処します。

他にどのようにこの動作を防止または防止する可能性がありますか？

私はこれに付随する画像を持っていましたが、新しいユーザーは画像を投稿できないことは明らかです。 ここJSフィドルあなたは簡単に問題を再現できるようにするべきであるのです。http://jsfiddle.net/4N9Kg/22/

Answer 1

私は回避策を持っている...（免責事項：それは回避策ではないソリューションです）

$('#sel').mousedown(function(e){ 
    $(e.target).attr('selected', 'selected'); //select the clicked <option> item 
    e.preventDefault(); 
}); 

DEMO