Javascript: Role programaticamente o elemento SELECT não pop-up para baixo no Chrome

Question

Nov 02, 2011, 05:38 PM

Javascript: Role programaticamente o elemento SELECT não pop-up para baixo no Chrome

Eu tenho umSELECT em uma página da web e eu gostaria que ele carregasse rolada para a parte inferior. Na maioria dos navegadores, eu posso fazer isso:

myselect.scrollTop = myselect.scrollHeight;

ApesarscrollHeight está fora dos limites, os navegadores descobrem isso e o limitam adequadamente. Exceto no Google Chrome. Eu poderia enviar um relatório de erro, mas isso não me ajuda com o meu problema imediato. Então eu tentei o seguinte:

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

Mas isso subtraiu muito - havia itens abaixo da parte inferior do elemento. Eu também tentei subtrairoffsetHeight, mas isso foi um pouco pior.

Alguém conhece uma maneira independente de navegador de calcular corretamente oscrollTop que está dentro dos limites, para funcionar com o Chrome?

BTW, eu encontrei esta pergunta no stackoverflow: Método entre navegadores para definir ScrollTop de um elemento?. Talvez isso funcione para DIVs, mas não para elementos SELECT e / ou não no Chrome.

Obrigado

UPDATE: Aqui está uma página HTML que demonstra o 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>

Se eu vir isso no Chrome, a última opção "lastone" é quase sempre cortada na parte inferior. MAS, se eu remover oclass="fields9" atributo, o problema desaparec