Problèmes avec les barres de défilement verticales div sur l'iPad

Question

Lorsqu'un utilisateur effectue une recherche sur mon site Web, je souhaite afficher le résultat dans un petit div avec des barres de défilement verticales au lieu que l'utilisateur doive faire défiler la page entière. Cela fonctionne parfaitement dans tous les navigateurs MAIS je reçois des problèmes sur l'iPad. Je peux voir que le résultat de la recherche ne rentre pas dans la div mais aucune barre de défilement n'apparaît sur l'iPad. Aussi quand j'essaye de faire défiler à l'intérieur du div la pleine page défile à la place. Y a-t-il une solution pour que cela fonctionne?

HTML et CSS:

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

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

Answer 1

Je crois que la réponse est que vous ne pouvez pas faire défiler à moins que vous utilisez les méthodes à deux doigts. Cependant, si vous regardez le dernier lien, il existe une solution de contournement.

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

Solution:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch

Answer 2

Pour une raison étrange, changer la div à une période fonctionne sur un iPad.

Answer 3

iScroll est le plugin jQuery mentionné par tahdhaze09. Et pour être plus précis:

iScroll évolue et ajoute de nombreuses nouvelles fonctionnalités à la fonctionnalité de base de défilement . Si tout ce dont vous avez besoin est le plaine vieux routeur pour webkit mobile , vous devriez vraiment utiliser iscroll-lite.js à la place.

iscroll-lite.js fait partie du paquet iScroll. Il semble que cela résoudra très bien le problème du rouleau à un doigt.