web-dev-qa-db-fra.com

Bug du navigateur Android? défilement de débordement div

Pouvez-vous faire défiler le contenu de débordement d'un div dans le navigateur Android? 

Il est scrollable dans tous les autres navigateurs modernes.

Dans iOS, il est possible de faire défiler le texte - mais cela n’affiche aucune barre de défilement - mais vous pouvez le faire défiler en le faisant glisser.

Un exemple simple: http://jsfiddle.net/KPuW5/1/embedded/result/

Cela sera-t-il réparé bientôt? 

androidhtmlandroid-browser
30
mercador

Android 3.0 et versions ultérieures prennent en charge overflow:scroll; à partir de <3.0, c’est une autre histoire. Vous pouvez avoir du succès avec les polyfills comme iScroll, mais cela a un coût. Il est difficile à implémenter sur des sites avec des mises en page complexes et vous devez appeler une méthode chaque fois que le contenu de votre site change. L'utilisation de la mémoire est également un problème: sur ce type de remplissage, les performances peuvent être à la traîne.

Je recommanderais une approche différente: utilisez Modernizr pour détecter la prise en charge du défilement excessif, ajoutez une classe à votre balise html et utilisez-la pour réécrire votre code CSS afin que les pages défilent 'normalement' au lieu de les mettre dans une zone.

/* For browsers that support overflow scrolling */
#div {
    height: 400px;
    overflow: auto;
}

/* And for browsers that don't */
html.no-overflowscrolling #div {
    height: auto;
}
25
Husky

overflow: scroll; est pris en charge à partir d'Android 3 (API 11).

Pour une multiplate-forme (à savoir iOS <= 4.3.2) Cubiq iScroll est un correctif facile à mettre en œuvre.

8
Alastair

Vous pouvez essayer touchscoll.js pour les éléments div à défilement

3
Joe Antonetti

Juste pour être complet:

Les barres de défilement sont présentes dans Android 2.3, mais elles sont très boguées et, par défaut, leur style a une largeur de 0; elles sont donc invisibles.

Vous pouvez les rendre visibles en ajoutant un style comme: 

::-webkit-scrollbar {
    width: 30px;
}
::-webkit-scrollbar-track {
    background-color: $lightestgrey;
}
::-webkit-scrollbar-thumb {
    background-color: $lightgrey;
}

Cependant, l’élément thumb n’est pas déplaçable, vous ne pouvez le déplacer qu’en tapotant la piste en dessous ou au-dessus.

En outre, ces styles modifieront l'apparence de vos barres de défilement dans tous les navigateurs Webkit. Il est donc préférable d'ajouter une classe qui s'applique uniquement à Android 2.3.

0
emik