¿Cómo puedo evitar que Chrome se desplace para enfocar un seleccionar

Question

Estoy trabajando en un control donde tendría dos listas de selección múltiple con colecciones de elementos que se pueden mover entre sí.

Hay una posibilidad de que el contenido de una o ambas listas serán más anchos que me gustaría que el artículo en sí mismo ser, y por lo que tengo que cada uno representado por dos divs y un selecto como sigue:

<div class="container"> 
    <div class="concealer"> 
     <select size="4"> 
      ... 
     </select> 
    </div> 
</div> 

Poner la selección dentro de un div permite el desplazamiento horizontal (ya que seleccionar no). La selección se redimensiona (se establece el atributo de tamaño) para ajustar su contenido a medida que se agregan o eliminan elementos. El "corrector" evita que las barras de desplazamiento dobles oculten la barra de desplazamiento vertical en la selección, y se dimensiona verticalmente cuando la selección también cambia.

Estoy usando html5. IE9 en modo estándar y Firefox están bien. El problema que estoy teniendo es con Chrome (en realidad Safari también, entonces ... webkit). Si el control está en una ventana o contenedor (un div por ejemplo) con desplazamiento vertical, y lo has desplazado hasta el punto donde no puedes ver la parte superior de la selección, si la parte inferior de la selección está visible (o ser visible en el contenedor externo, si se puede ver el desbordamiento), al hacer clic en un elemento en la selección, haciendo que la selección se enfoque, Chrome desplaza el contenedor externo hacia arriba o hacia afuera lo suficiente para que la parte superior de la selección sea visible si pudieras verlo a través de los divs que lo contienen.

Como se indica, si la opción inferior de la selección es visible en la ventana (que contiene), pero la parte superior de la selección no es, Chrome se desplazará.

me han escrito secuencia de comandos para ajustar el scrollTop de la ventana de desplazamiento de nuevo a su posición actual, y que haría trabajo, excepto que estoy encontrando que en mis ensayo y producción ambientes, el ajuste se hace por el cromo es también causando que la selección de la opción real suceda DESPUÉS de que Chrome haya hecho su propio ajuste, lo que significa que el clic se registra en la opción incorrecta (está desactivado por el desplazamiento del navegador). Es un problema si hay un evento en foco en la selección o no.

No he podido obtener la opción de seleccionar problema para que ocurra en una prueba barebones como esta, pero el desplazamiento en sí es un problema.

La única forma que he encontrado para evitar que esto ocurra es ajustar el tamaño de la selección a un número lo suficientemente grande como para poner la parte inferior del recipiente de selección fuera del contenedor externo, pero esto no es ideal , ya que deja mucho espacio en blanco, es una mala experiencia para el usuario, y combate un problema que (aunque bastante profundo) solo afecta a webkit.

¿Alguien sabe cómo más puedo prevenir o contrarrestar este comportamiento?

Tenía imágenes para ir con esto, pero comprensiblemente, los nuevos usuarios no pueden publicar imágenes. Aquí es un violín de JS que deben permitirá reproducir fácilmente el tema: http://jsfiddle.net/4N9Kg/22/

Answer 1

tengo una solución .. (RENUNCIA: Es una solución no una solución)

$('#sel').mousedown(function(e){ 
    $(e.target).attr('selected', 'selected'); //select the clicked <option> item 
    e.preventDefault(); 
}); 

DEMO