select要素をスクロールするとIE

Question

でこの問題をDOMからオプションを削除するときに先頭にジャンプのInternet Explorerに隔離されるように表示されます。

彼らは二重のJavascriptを使用してクリックしているとき、私は別のselectからoptionタグを移動しています。 select要素は多くの項目を持つことができるので、高さをoverflow: auto;に設定してスクロールします。リストを下にスクロールして移動する項目をダブルクリックすると、optionが削除されたときに、selectのリストがChromeまたはFirefoxと同じように現在のスクロール位置に留まる代わりに上部にスクロールします。

私はここにこれを実証するための基本的な例を作っ：https://jsfiddle.net/yk8LeLbw/1/

Javascriptが非常に簡単です：

$(".listBoxSelectorAvail").dblclick(function() { 
    $(this).find("option:selected").remove().appendTo(".listBoxSelectorAssigned"); 
}); 
$(".listBoxSelectorAssigned").dblclick(function() { 
    $(this).find("option:selected").remove().appendTo(".listBoxSelectorAvail"); 
}); 

私はこれがなぜ起こるか、特定の理由を見つけることができませんでした - 私はよそれがバグか、これが予想される動作かどうかは分かりませんが、実行できることは何ですか？

EDIT：より明確にタイトルを作っ

EDIT 2：私は停止スクロールに期待していたが、私はこれまでのところまで来ている最善の解決策は、アイテムが移動された後のように、rescrollすることですここに表示されます： https://jsfiddle.net/yk8LeLbw/2/

Answer 1

問題は、IEの動作が異なります。だから、私たちはその望ましくない振る舞いを回避しなければならない。解決策は、divにselectをラップし、いくつかのCSSを使用することです。

ここには、作業jsFiddleです。

私は各select周りdivを包み、multiple="true"属性でsize="50"属性を置き換える方法に注意してください。これにより、select要素のスクロールバーが削除されます。

$(document).ready(function() { 
    var arr1 = []; 
    var arr2 = []; 
    arr1.push("<div class='scroll'><select class='listBoxSelectorAvail' multiple='true'>"); 
    arr2.push("<div class='scroll'><select class='listBoxSelectorAssigned' multiple='true'>"); 
    for (var i = 0; i < 20; i++) { 
    arr1.push("<option value=\"" + i + "\">Option " + i + "</option>"); 
    } 
    arr1.push("</select></div>"); 
    arr2.push("</select></div>"); 
    $("body").append(arr1.join("")); 
    $("body").append(arr2.join("")); 
    $(".listBoxSelectorAvail").dblclick(function(e) { 
    $(this).find("option:selected").remove().appendTo(".listBoxSelectorAssigned"); 
    }); 
    $(".listBoxSelectorAssigned").dblclick(function(e) { 
    $(this).find("option:selected").remove().appendTo(".listBoxSelectorAvail"); 
    }); 
}); 

ここで修正CSSです。

select { 
    width: 200px; 
    height: 200px; 
} 
.scroll { 
    overflow: auto; 
    display: inline-block; 
    margin-left: 10px; 
}