Utilisez le scroll natif du mobile dans les pages Web en CSS

Vous l'avez peut-être remarqué, si vous utilisez un overflow scroll ou auto sur un élément en CSS, celui-ci ne sera pas très fluide sur safari mobile notamment et certains navigateurs Android aussi. Heureusement il existe une règle CSS simple pour régler ce problème.

Voici cette règle magique à utiliser sans modération :

-webkit-overflow-scrolling: touch;

Si vous utilisez des éléments en position:relative à l'intérieur de votre overflow vous aurez peut-être des problèmes de rendu. On peut donc corriger ce problème avec la règle ci-dessous :

-webkit-transform: translate3d(0,0,0);

Voici maintenant un exemple d'utilisation dans une feuille de style :

.scollableElement{
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.scollableElement *{
	-webkit-transform: translate3d(0,0,0);
}

Voilà, j’espère que cette petite démonstration aura pu vous aider pour vos projets.

Commentaires