6

私は、相互に移動できるアイテムのコレクションを含む 2 つの複数選択リストを持つコントロールに取り組んでいます。

1 つまたは両方のリストのコンテンツが、アイテム自体の幅よりも広くなる可能性があるため、次のように、それぞれを 2 つの div と select で表します。

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

select を div 内に配置すると、水平スクロールが可能になります (select はそうではないため)。項目が追加または削除されると、その内容に合わせて select のサイズが変更されます (size 属性が設定されます)。「コンシーラー」div 回避ダブル スクロール バーは、選択時の垂直スクロール バーを非表示にし、選択が変更されると垂直方向にサイズ変更されます。

私はhtml5を使用しています。標準モードの IE9 と Firefox は問題ありません。私が抱えている問題はChromeにあります（実際にはSafariもそうです... webkit）。コントロールがウィンドウまたはコンテナー (たとえば、div) 内にあり、垂直スクロールがあり、選択の下部が表示されている場合 (またはオーバーフローが見られる場合は、外側のコンテナーに表示されます)、選択のアイテムをクリックして選択にフォーカスを当てると、Chrome は外側のコンテナーを一番上までスクロールするか、選択の一番上が表示されるように十分にスクロールします。それを含む div を通して見ることができれば表示されます。

前述のように、選択の最下部のオプションが (含む) ウィンドウに表示されているが、選択の上部が表示されていない場合、クロムはスクロールします。

スクロールされたウィンドウのスクロールトップを現在の位置に戻すスクリプトを作成しましたが、それは機能しますが、ステージング環境と本番環境で、クロムによって行われている調整により、実際のオプション選択もクロムが独自の調整を行った後に発生します。これは、クリックが間違ったオプションに登録されることを意味します (ブラウザーが上にスクロールした分だけオフになります)。選択時に onfocus イベントがあるかどうかが問題です。

このような必要最小限のテストでオプション選択の問題が発生することはありませんでしたが、スクロール自体が問題です。

これを防ぐために私が見つけた唯一の方法は、選択の下部を外側のコンテナーの下部の十分に外側に配置するのに十分な大きさの数値に選択のサイズを変更することですが、これは完全に理想的ではありません。空白が多く、ユーザー エクスペリエンスが悪く、Webkit にのみ影響する (かなり深刻ではありますが) 問題と闘っています。

この行動を防止または打ち消す方法を他に知っている人はいますか?

これに合う画像はありましたが、当然のことながら、新しいユーザーは画像を投稿できません。問題を簡単に再現できるjsフィドルは次のとおりです。 http://jsfiddle.net/4N9Kg/22/

4

1 に答える 1

3

回避策があります..（免責事項：これは解決策ではなく回避策です）

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

デモ

于 2012-08-24T11:41:27.060 に答える