-webkit-overflow-scrolling
Non standard: Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.
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 |