2011-11-02 13 views
2

ウェブページにSELECT要素があり、下にスクロールしてロードしたい。ほとんどのブラウザでは、私はこれを行うことができます。範囲外であるJavascript:非ポップアップのSELECT要素をChromeの下部にプログラムでスクロール

myselect.scrollTop = myselect.scrollHeight; 

scrollHeightものの、ブラウザがそれを把握し、適切に制限します。 Google Chromeを除く私はバグレポートを提出することができますが、それは私の直面する問題で私を助けません。だから私はこれを試した:

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

しかし、それはあまり差し引いた - 要素の下部の下にある項目があった。私はoffsetHeightを減算してみましたが、それはやや悪かったです。

Chromeで正しく動作するようにブラウザ内で適切に範囲内にあるscrollTopを正しく計算する方法を知っている人はいませんか?

私はこの質問をstackoverflow:Cross-Browser method for setting ScrollTop of an element?で見つけました。おそらく、DIVでは有効ですが、SELECT要素やChromeでは使用できません。

ありがとうございます!

UPDATE:私はこれがChromeで表示した場合

<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> 

、最後のオプション「lastone」は、主に下を切断されています。ここでは、問題を示してHTMLページがあります。しかし、class="fields9"属性を削除すると、問題は解決しません。

+0

scrollHeightがクロムで動作するので、問題を表示するためにjsfiddleを設定できますか?私は常にそれを使用します。 – Ryan

+0

私が編集に貼り付けたコードが、あなたが探していたものであることを願っています。 –

答えて

2

FirefoxとChromeで正しく動作するようにfields9宣言でオーバーフローを取り除きます。ここに実例があります:http://jsfiddle.net/c4LDv/7/

は悲しいことに、私はそれがOperaで働く作るための任意の解決策を見つけることができませんでした - どうやらあなたはOperaでプログラム的に選択するスクロールすることはできません...

編集:私が作ってみましたhackishアプローチで、selectedIndexを使用して最後のオプションにスクロールします。ここで確認してください:http://jsfiddle.net/c4LDv/16/ Chrome、Firefox、Operaで動作します。 しかし - 1つ以上のオプションがすでに選択されている場合(ページの読み込み時)、Operaの最後のオプションにスクロールしません - こちらをご覧くださいhttp://jsfiddle.net/c4LDv/15/ - この動作を無効にすることはできませんでした。