web-dev-qa-db-fra.com

Défilement lisse par balayage de style natif avec accélération/décélération activée IOS using overflow-x: scroll; div scrollable en utilisant CSS

Utiliser un div à défilement 

.scrollable-div{
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

DEMO sur les appareils Android, le défilement au fur et à mesure est lisse et comporte même des accélérations et des décélérations.

Le même code sur un iPhone, le défilement est raide. Lorsque l'utilisateur relâche le contact, le défilement s'arrête immédiatement.

Comment faites-vous pour que l'iPhone traite la div à défilement comme un navigateur Android avec un défilement en douceur du style natif d'accélération/décélération?

ioscsshtml5css3mobile
44
Aaron

Vous pouvez obtenir un défilement de type natif sur un élément HTML avec overflow en utilisant la propriété CSS propriétaire suivante:

-webkit-overflow-scrolling: touch;

Il a cependant quelques réserves. Selon le contenu de l'élément, le rendu peut être légèrement interrompu. Vous devez donc le tester et voir s'il convient à vos besoins. Je ne sais pas non plus si cela fonctionne correctement lorsque vous spécifiez overflow-y: hidden. Si ce n'est pas le cas, vous devriez pouvoir le faire fonctionner en jouant avec différentes valeurs pour overflow-x, overflow-y et overflow (auto ne semble pas fonctionner).

Si vous en avez besoin, vous pouvez simuler overflow-y: hidden sur votre div en créant une seconde div imbriquée avec le contenu et en définissant cette propriété. Mais j'espère que ce n'est pas nécessaire.

106
Marco Aurélio

La suggestion de Marco Aurélio est en fait la meilleure solution. Cela fonctionne mieux si vous définissez overflow-y: scroll ET en ajoutant -webkit-overflow-scrolling: touch à l'élément également. Vous aurez un sentiment de défilement semblable à celui d'un natif

1
Dionys Lucifer

Ok, c'est ce qui fonctionne pour mon: 

body, html { 
   overflow-x:hidden; 
   -webkit-overflow-scrolling: touch;
}
0
meck373