Débordement de Défilement sur Android ne fonctionne pas?

yupp, je suis un de ces gars qui veulent développer des applications mobiles en HTML5. Sur Android et iOS. Semble fou, je le sais. Malheureusement j'ai un problème...

J'ai un classique de l'app avec un pied de page et en-tête et un contenu qui doit être déplacé. Sur iOS, cela fonctionne fantastique!!!! L'en-tête et pied de page ont "position: fixed" haut/bas et le contenu utilise natif de défilement de l'élan avec "-webkit-débordement-défilement: touch;". Je sais que "-webkit-débordement-défilement: touch;" n'est pas disponible sur Android, mais cette propriété n'est pas seulement ignoré, le défilement ne fonctionne pas du tout!

Alors svp quelqu'un peut me dire comment obtenir des "indigènes", le défilement sur iOS et "bon" scrolling sur Android avec le même balisage et de style? E. g. si je peux utiliser natif de défilement avec l'élan - grand, si ce n'est de la plaine de défilement.

Note: j'ai seulement besoin de l'appui des dernières versions pour l'instant (pas d'Android 2.3!), donc je ne veux pas JS-de Base comme iScroll 4.

.content {
    //no(!) scrolling on Android - why?
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

JSFiddle: http://jsfiddle.net/bmJxN/

Merci!

OriginalL'auteur Pipo | 2012-12-18

  1. 7

    Désolé de déterrer un vieux post, mais comme il semble y avoir pas de réponse satisfaisante, je pensais que je voudrais ajouter mes 2cents pour tout le monde de se retrouver ici, comme moi.

    Parler du problème général de défilement dans le mobile WebApps, le défilement & de l'élan sur les navigateurs mobiles sont une douleur comme il existe une grande variété d'implémentations différentes en fonction de la plateforme : navigateur Android != Chrome != Safari != l'opéra etc, et Android < 3 ne prend pas en charge le défilement ainsi que des versions plus récentes, tout comme iOS < 5.

    La situation est compliquée, et le mot peut être un problème pour iOS, où la plupart des appareils qui sont sur iOS 5 ou 6, mais c'est un vrai problème de la fragmentation d'Android.

    Afin de mieux comprendre à présent, vous avez pu lire cette.

    Pour répondre à cela, comme vous l'avez déjà souligné, il y a des issues telles que iScroll ou, plus récemment, le Renversement que vous pouvez mieux gérer le natif implems et JS de base. Plus récemment, le Financial Times, l'équipe a publié le FTScroller bibliothèque qui semble également prometteuse.

    Maintenant pour votre situation, si vous ne voulez soutenir Android 4+ & iOS5+, vous devriez être en mesure de le faire fonctionner à la fois avec de l'élan en utilisant uniquement correction du positionnement et 

    overflow: auto;
-webkit-overflow-scrolling: touch;

    sur votre contenu défilant (vous n'avez pas besoin de spécifier "overflow-x:hidden" si vous utilisez la propriété d'auto). Si non, vous avez peut-être fait une erreur dans votre fixe poser ou une autre mise en forme css de la propriété ? (hérité de corps, accessoires, etc).

    Mise à JOUR : j'aurais dû faire ceci avant de poster ma réponse, mais je viens de tester le violon sur mon Nexus4 et votre code fonctionne dans Chrome : ce qui signifie probablement que vous avez testé sur un appareil plus ancien, sans Android 4+ ou avec un navigateur qui n'a pas de support de la propriété overflow ?

    Notes :

    • veuillez noter que, bien que l'effet momentum est actif par défaut sur android & iOS, c'est la plate-forme spécifique de l'élan qui seront appliquées : elles diffèrent l'une de l'autre, contrairement à un JS polyfill qui facilite le défilement dynamique de la plate-forme indépendante. Aussi, sur iOS, le défilement est beaucoup plus lisse que d'un appareil Android, même si la situation s'est améliorée grâce aux nouveaux appareils et Android 4.0+ (c'était douloureux et inutilisable dans la plupart des lourds peuplée point de vue avant que).
    • Sur iOS, vous aurez l'effet de rebond natif de la plate-forme, mais pas sur Android, le navigateur natif UX ne comprend pas cette effet de rebond (c'est bizarre parce que cet effet existe dans d'autres parties de l'OS UX, tels que les paramètres). Vous pourriez obtenir sur Android, avec une bibliothèque, mais méfiez-vous de l'uncanny valley.
    • D'autres problèmes, même sur les navigateurs les plus récents, tels que l'absence d'un défilement de l'indicateur de position dans Android navigateurs comme indiqué ici : http://barrow.io/overflow-scrolling. Sur iOS, vous pouvez avoir un problème avec le tristement célèbre "bande de caoutchouc effet de défilement" sur la totalité de votre page tout en ayant le défilement à l'intérieur des éléments spécifiques, comme indiqué dans "Comment faire pour désactiver la bande de caoutchouc dans iOS web apps?". Vous aurez un pb similaire pour WP8 webApps.

    Tout cela pour dire que quelque chose d'aussi simple que le défilement est loin d'être parfait dans le mobile WebApps, et c'est encore pire dans les WebViews de performance (lors du développement d'applications PhoneGap par exemple). Bonne chance !

    OriginalL'auteur Mathis Gardon

  2. 0

    L'ajout d'une note ici en raison du comportement qui ne semble pas être correctement expliqués ailleurs.

    Lors de l'utilisation de "overflow: auto" ou " overflow: scroll google Chrome pour Android affiche la barre de défilement indicateurs que momentanément au chargement de la page avant de se faufiler entre eux (contrairement à la typique du comportement des navigateurs de bureau). Pour compliquer les choses, ces indicateurs sont tellement minces et translucides, ils sont faciles à manquer.

    Cela peut ne pas être un problème pour la page général de défilement; toutefois, la perte de barres de défilement pour indiquer un contenu supplémentaire présente un grave UX problème lorsqu'il est utilisé pour les zones de défilement de la page (comme pour l'ensemble de la page apps).

    Pour corriger ce problème, vous pouvez ajouter des barres de défilement. Lors de l'utilisation de "overflow:auto" ces barres de défilement apparaît uniquement lorsque le contenu dépasse la zone visible (comme sur les navigateurs de bureau).

    Ajoutez le code suivant à votre fichier CSS:

    ::-webkit-scrollbar-track {
  background-color: #F5F5F5;
}

::-webkit-scrollbar {
  width: 12px;
  background-color: rgba(0,0,0,0);
}

::-webkit-scrollbar:hover {
  background-color: rgba(0, 0, 0, 0.09);
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid #F5F5F5;
  -webkit-border-radius: 100px;
}

::-webkit-scrollbar-thumb:active {
  background: rgba(0,0,0,0.61);
  -webkit-border-radius: 100px;
}

    Vous pouvez également ajouter des flèches verticales avec le code ci-dessous. De la même façon flèches horizontales peuvent être inclus par le remplacement de la verticale à l'horizontale.

    ::-webkit-scrollbar-button {
  width: 12px;
  height: 12px;
  background-color: #F5F5F5;
  background-size: 100%;
}

::-webkit-scrollbar-button:vertical:increment {
  background-image: url('../images/arrows/arrow-down.png');
}

::-webkit-scrollbar-button:vertical:decrement {
  background-image: url('../images/arrows/arrow-up.png');
}

    Remarque les deux dernières lignes nécessitent images de flèches d'être présent, mais a été incapable de les ajouter à la poste (probablement en raison de leur petite taille).

    D'autres propriétés de la barre de défilement peut également être personnalisé. Le guide ci-dessous fournit une explication détaillée:

    http://poselab.com/en/custom-scrollbars-in-webkit/

    OriginalL'auteur Bit32

  3. -2

    Il va maintenant travailler, il y a beaucoup de raisons pour cela. Ce que vous pouvez faire est d'utiliser un tiers de la bibliothèque pour réaliser cette tâche. J'ai utilisé l'une des bibliothèques open source de github pour obtenir le résultat :- La bibliothèque est ici

    Espère que ce sera utile...

    Cela semble utiliser iScroll et jQuery Mobile - n'est-ce pas possible sur Android 4 sans JS? Je veux garder mon passe-partout/code JS faible pour obtenir plus de vitesse (même si je dois sacrifier les anciennes versions d'Android).
    Même j'ai essayé d'éviter d'utiliser js... mais finalement j'ai réalisé js était la seule solution... ne laissez-moi savoir si vous trouvez une meilleure solution.

    OriginalL'auteur Aamir Shah