-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

auto | touch

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 initialeauto
Applicabilitéboîtes défilantes
Héritéeoui
Valeur calculéecomme spécifié
Type d'animationdiscrète

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi