div - Javascript: Desplaza programáticamente el elemento SELECT no emergente a la parte inferior en Chrome
scrolltop javascript mobile (1)
Tengo un elemento SELECT en una página web, y me gustaría cargarlo desplazado hacia abajo. En la mayoría de los navegadores, puedo hacer esto:
myselect.scrollTop = myselect.scrollHeight;
Aunque scrollHeight está fuera de límites, los navegadores lo descifran 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 restaba demasiado: había elementos debajo de la parte inferior del elemento. También traté de restar offsetHeight , pero eso fue un poco peor.
¿Alguien sabe una manera independiente del navegador para calcular correctamente el scrollTop que está dentro de los límites, así que funcionará con Chrome?
Por cierto, encontré esta pregunta en stackoverflow: método Cross-Browser para configurar ScrollTop de un elemento? . Quizás eso funcione para los DIV, pero no para los elementos SELECCIONAR y / o no en Chrome.
¡Gracias!
ACTUALIZACIÓN: Aquí hay una página HTML que demuestra 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 en la parte inferior. PERO, si class="fields9" atributo class="fields9" , el problema desaparece.
Deshazte del desbordamiento: auto en la declaración fields9 para que funcione correctamente en Firefox y Chrome. Aquí está el ejemplo de trabajo: http://jsfiddle.net/c4LDv/7/ .
Lamentablemente, no pude encontrar ninguna solución para hacer que funcione en Opera: aparentemente no se puede desplazar seleccionando programáticamente en Opera ...
Editar : he llegado a un enfoque hackish, usando selectedIndex para desencadenar el desplazamiento a la última opción. Compruébelo aquí: http://jsfiddle.net/c4LDv/16/ funciona en Chrome, Firefox y Opera. Sin embargo , no se desplazará hacia abajo a la última opción en Opera si una o más opciones ya están seleccionadas (en la carga de la página) - ver aquí http://jsfiddle.net/c4LDv/15/ - No pude anular este comportamiento.