-webkit-overflow-scrolling
Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.
La propriété -webkit-overflow-scrolling permet de contrôler si l'appareil tactile utilise l'inertie pour faire défiler l'élément visé par la déclaration.
Valeurs
auto-
Le défilement « normal » est utilisé : le défilement s'arrête dès que le doigt ne touche plus l'écran.
touch-
Le défilement simule une certaine inertie : le contenu continue à défiler légèrement après que le toucher soit fini. La vitesse et la durée du défilement sont proportionnelles à la vitesse de déplacement du doigt sur l'écran. Cela crée un nouveau contexte d'empilement.
Syntaxe formelle
Exemples
CSS
div {
width: 100%;
overflow: auto;
}
p {
width: 200%;
background: #f5f9fa;
border: 2px solid #eaf2f4;
padding: 10px;
}
.scroll-touch {
-webkit-overflow-scrolling: touch; /* on laisse le défilement se poursuivre */
}
.scroll-auto {
-webkit-overflow-scrolling: auto; /* on arrête le défilement immédiatement */
}
HTML
<div class="scroll-touch">
<p>Ce paragraphe a un défilement inertiel.</p>
</div>
<div class="scroll-auto">
<p>Pas celui-ci.</p>
</div>
Résultat
Spécifications
Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Elle est documentée dans la référence CSS de Safari.
| Valeur initiale | auto |
|---|---|
| Applicabilité | boîtes défilantes |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |