Problemas con las barras de desplazamiento verticales div en el iPad

Question

Cuando un usuario realiza una búsqueda en mi sitio web, quiero mostrar el resultado en un pequeño div con barras de desplazamiento verticales en lugar de que el usuario tenga que desplazarse por la página completa. Eso funciona perfecto en todos los navegadores PERO tengo problemas en el iPad. Puedo ver que el resultado de búsqueda no encaja en el div pero no aparece una barra de desplazamiento en el iPad. Además, cuando intento desplazarme dentro de div, la página completa se desplaza en su lugar. ¿Hay alguna solución para que esto funcione?

HTML y CSS:

<div class="searchResult"> 
    //Here I show the search result 
</div> 

div.searchResult 
{ 
    height: 540px; 
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll; 
} 

Answer 1

Creo que la respuesta es que no se puede desplazar a menos que utilice los métodos de dos dedos. Sin embargo, si mira el último enlace, hay una solución.

Problemas:
CSS Overflow property not working in iPad
http://www.webmanwalking.org/library/experiments/dsp_frames_outer_document.html

Solución alternativa:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch

Answer 2

Por alguna extraña razón, el cambio de la div a un palmo trabaja en un iPad.

Answer 3

iScroll es el complemento jQuery que tahdhaze09 mencionó. Y para ser más específico:

iScroll está evolucionando y agregando muchas características nuevas a la funcionalidad de desplazamiento básico . Si todo lo que necesita es el viejo y simple desplazador para el webkit móvil , en realidad debería usar iscroll-lite.js.

iscroll-lite.js es parte del paquete iScroll. Parece que resolverá bastante bien el problema del desplazamiento con un solo dedo.