Javascript: Desplácese mediante programación el elemento SELECT no emergente hacia abajo en Chrome

Question

Nov 02, 2011, 05:38 PM

Javascript: Desplácese mediante programación el elemento SELECT no emergente hacia abajo en Chrome

Tengo unSELECT element en una página web, y me gustaría que se cargue desplazado hacia abajo. En la mayoría de los navegadores, puedo hacer esto:

myselect.scrollTop = myselect.scrollHeight;

A pesar de quescrollHeight está fuera de límites, los navegadores se dan cuenta de eso y lo limitan adecuadamente. Excepto en Google Chrome. Podría presentar un informe de error, pero eso no me ayuda con mi problema inmediato. Así que probé esto:

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

Pero eso resta demasiado: había elementos debajo de la parte inferior del elemento. También intenté restaroffsetHeight, pero eso fue un poco peor.

Alguien conoce una forma independiente del navegador para calcular correctamente lascrollTop que está correctamente dentro de los límites para que funcione con Chrome?

BTW, encontré esta pregunta en stackoverflow: Método de navegador cruzado para configurar ScrollTop de un elemento?. Quizás eso funcione para DIV, pero no para elementos SELECT y / o no en Chrome.

¡Gracias

UPDATE: Aquí hay una página HTML que muestra el problema:

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

Si veo esto en Chrome, la última opción "lastone" se corta principalmente en la parte inferior. PERO, si elimino laclass="fields9" atributo, el problema desaparece.