-webkit-overflow-scrolling

No estándar: Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

La propiedad CSS -webkit-overflow-scrolling controla si los dispositivos táctiles usan el desplazamiento momentum o inercial (momentum-based scroll) para el elemento dado.

Valor inicialauto
Applies toscrolling boxes
Heredableyes
Valor calculadocomo se especifica
Animation typediscrete

Valores

auto

Usa el desplazamiento (scroll) normal, donde el contenido deja inmediatamente de desplazarse cuando quitas el dedo de la pantalla.

touch

Use el desplazamiento momentum o inercial, donde el contenido sigue desplazándose después incluso de haber acabado el gesto de control y de haber quitado el dedo de la pantalla. La velocidad y duración de esta continuación es proporcional a cuán fuerte fue el gesto de desplazamiento o scroll. Además se crea un nuevo contexto de apilado (stacking context).

Sintaxis Formal

Error: could not find syntax for this item

Ejemplos

HTML

html
<div class="scroll-touch">
  <p>This paragraph has momentum scrolling</p>
</div>
<div class="scroll-auto">
  <p>This paragraph does not.</p>
</div>

CSS

css
div {
  width: 100%;
  overflow: auto;
}

p {
  width: 200%;
  background: #f5f9fa;
  border: 2px solid #eaf2f4;
  padding: 10px;
}

.scroll-touch {
  -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
}

.scroll-auto {
  -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
}

Resultado

Especificaciones

No es parte de ninguna especificación. Apple tiene una descripción en la Referencia CSS de Safari.

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también