-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.

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

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

Compatibilité des navigateurs

BCD tables only load in the browser