2

WebページにSELECT要素があり、一番下までスクロールしてロードしたいと思います。ほとんどのブラウザでは、これを行うことができます：

myselect.scrollTop = myselect.scrollHeight;

範囲外scrollHeightですが、ブラウザはそれを理解し、適切に制限します。GoogleChromeを除く。バグレポートを提出することはできますが、それでは当面の問題は解決しません。だから私はこれを試しました：

myselect.scrollTop = myselect.scrollHeight - myselect.clientHeight;

しかし、それはあまりにも多くを差し引きました-要素の下部の下にアイテムがありました。私も引き算を試みoffsetHeightましたが、それは少しひどいものでした。

scrollTopChromeで動作するように、適切にインバウンドであるを適切に計算するブラウザに依存しない方法を知っている人はいますか？

ところで、私はstackoverflowでこの質問を見つけました： 要素のScrollTopを設定するためのクロスブラウザメソッド？。おそらくそれはDIVに対しては機能しますが、SELECT要素に対しては機能しないかChromeでは機能しません。

ありがとう！

更新：問題を示すHTMLページは次のとおりです。

<html>
<head>

<style type="text/css">
.fields9{font-size:15px;height: 180px; width:420px; overflow: auto; border:1px solid #2d2b2d;}
</style>

</head>
<body>

<select multiple="multiple" size="10" id="myselect" class="fields9">
<option>firstone</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>option</option>
<option>lastone</option>
</select>

<script type="text/javascript">

element=document.getElementById("myselect");
//element.scrollTop = element.scrollHeight;
element.scrollTop = element.scrollHeight - element.clientHeight;

</script>

</body>
</html>

これをChromeで表示すると、最後のオプション「lastone」はほとんど下部が切り取られています。class="fields9"しかし、属性を削除すると、問題は解決します。

4

1 に答える 1

2

オーバーフローを取り除きます：FirefoxとChromeで正しく機能するようにfields9宣言で自動。実例は次のとおりです：http：//jsfiddle.net/c4LDv/7/。

悲しいことに、Operaで動作させるための解決策を見つけることができませんでした-どうやらOperaでプログラムでスクロール選択することはできません...

編集：selectedIndexを使用して、最後のオプションへのスクロールをトリガーする、ハックなアプローチを考え出しました。こちらをチェックしてください：http：//jsfiddle.net/c4LDv/16/ Chrome、Firefox、Operaで動作します。ただし、-1つ以上のオプションがすでに選択されている場合（ページの読み込み時）、Operaの最後のオプションまでスクロールダウンしません-ここを参照してくださいhttp://jsfiddle.net/c4LDv/15/-オーバーライドできませんでしたこの動作。

于 2011-11-08T10:20:19.530 に答える