web-dev-qa-db-fra.com

Défilement lent sur mobile / iOS lors de l’utilisation du débordement: Défilement

Pour configurer un menu hors toile, je dois définir le corps sur "débordement: caché" pour supprimer le défilement du corps et le rajouter dans un conteneur autour du contenu avec "débordement-y: défilement". Lorsque je fais cela, cela semble ralentir le défilement sur les appareils mobiles spécifiquement iOS.

Existe-t-il un problème de performances lors du déplacement de la barre de défilement du corps?

ioscssmobileoverflow
44
grasesed

Plutôt qu'un problème de performances, il est probable que vous ne voyez pas le défilement 'Momentum' défiler sur votre appareil iOS.

Ceci peut être résolu en ajoutant '-webkit-overflow-scrolling: touch' à votre élément de défilement i.e:

.scrolling-content {
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   height:100%; /*A value other than height:auto needs to be set*/
}

Par défaut, les appareils iOS utilisent le défilement "Momentum" sur le corps, mais l'ajout de "débordement-y: défilement" à un élément ne permet pas de définir un élément sur le défilement "momentum" par défaut.

Voir https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling pour plus d'informations.

Note: Il y a un certain nombre de Gotcha/Bugs avec l'utilisation de -webkit-overflow-scrolling: touchez certains navigateurs

101
sjm