overscroll-behavior y el encadenamiento del scroll

Llegas al final de un panel con scroll y sigues deslizando: el navegador empieza a desplazar la página de detrás. Ese comportamiento se llama encadenamiento del scroll, tiene sentido en un documento y es un desastre en un panel lateral, un modal o un mapa. overscroll-behavior lo controla con una declaración, y de paso permite desactivar el rebote elástico y el gesto de recargar tirando hacia abajo.

Los tres valores

overscroll-behavior se declara en el contenedor de scroll y controla qué ocurre cuando el usuario intenta desplazarse más allá de su límite.

auto. El valor por defecto. El desbordamiento del gesto se propaga al ancestro con scroll: eso es el encadenamiento. Además se permiten los efectos propios de la plataforma: el rebote elástico de macOS e iOS, y el gesto de recargar tirando hacia abajo en móvil.

contain. Corta el encadenamiento: el gesto no pasa al ancestro. Pero mantiene los efectos locales de la plataforma, así que el rebote elástico dentro del propio contenedor sigue funcionando.

none. Corta el encadenamiento y desactiva los efectos locales. Ni rebote, ni recarga por gesto.

En la práctica, contain es el valor que quieres el noventa por ciento de las veces. none solo cuando el rebote interfiere con lo que hace el componente: un lienzo que responde al gesto, un mapa, una superficie de dibujo.

.panel-lateral { overflow-y: auto; overscroll-behavior: contain; }
.mapa          { overflow: hidden; overscroll-behavior: none; }

Existe una versión por ejes, overscroll-behavior-x y overscroll-behavior-y, y sus variantes lógicas overscroll-behavior-block y overscroll-behavior-inline. El atajo acepta uno o dos valores.

/* un carrusel horizontal: no arrastra la página al llegar al final */
.carrusel { overscroll-behavior-inline: contain; overscroll-behavior-block: auto; }

Ese caso concreto es de los que más se agradecen: sin la declaración, deslizar horizontalmente hasta el final de un carrusel en un móvil hace que la página empiece a moverse en horizontal, o dispare el gesto de navegación atrás del sistema.

Los tres casos donde importa

El modal con scroll. Un diálogo largo tiene su propio scroll. Al llegar al final, sin contain, el gesto continúa y desplaza la página de detrás, con lo que al cerrar el modal el usuario está en otro sitio del documento.

dialog { max-block-size: 80dvh; overflow-y: auto; overscroll-behavior: contain; }

Conviene saber que esto sustituye a la técnica clásica de bloquear el scroll del cuerpo poniendo overflow: hidden en body al abrir el modal. Esa técnica tenía dos problemas conocidos: en iOS no funcionaba de forma fiable, y al restaurar el overflow la página perdía la posición de scroll salvo que la guardaras y la restauraras a mano. overscroll-behavior: contain en el propio diálogo no toca el body y no tiene ninguno de los dos.

El panel de chat o de notificaciones. Mismo caso: una lista con scroll propio dentro de una página con scroll.

El componente que gestiona su propio gesto. Un mapa, un editor de imágenes, un lienzo. Aquí none es lo correcto, porque el rebote elástico interfiere con la interpretación del gesto.

flowchart TB
A[Un contenedor con scroll propio llega a su limite] --> B{Que valor tiene overscroll-behavior}
B -->|auto| C[El gesto pasa al ancestro y la pagina se mueve]
C --> D[Ademas hay rebote elastico y recarga por gesto]
B -->|contain| E[El gesto no pasa al ancestro]
E --> F[El rebote elastico local se mantiene]
B -->|none| G[El gesto no pasa y no hay rebote ni recarga]
style A fill:#89b4fa,color:#11111b
style C fill:#f38ba8,color:#11111b
style E fill:#a6e3a1,color:#11111b
style F fill:#a6e3a1,color:#11111b
style G fill:#f9e2af,color:#11111b

La limitación que hay que conocer

Aquí está el detalle que evita un diagnóstico erróneo. Durante años, todas las implementaciones compartieron la misma limitación: la propiedad no tiene efecto en contenedores de scroll que no tienen desbordamiento.

Es decir, si declaras overscroll-behavior: contain en un panel cuyo contenido cabe entero —no hay nada que desplazar—, el gesto sobre ese panel sigue propagándose al ancestro. Y eso es justo lo contrario de lo que quieres en un modal cuyo contenido a veces cabe y a veces no: el comportamiento cambia según la longitud del contenido, que es la clase de inconsistencia más difícil de reproducir en un informe de error.

El estado a agosto de 2026:

• Chrome lo corrigió en la versión 144.
• Firefox lo corrigió en la versión 150.
• Safari todavía tiene la limitación desde que implementó la propiedad en la 16.

Si tu componente puede quedarse sin desbordamiento y necesitas que el gesto no se propague en todos los motores, la vía complementaria es asegurar que siempre hay algo que desplazar, aunque sea un píxel, o interceptar el gesto. Pero para el caso normal —un modal largo, un panel de chat— la propiedad hace exactamente lo que promete.

Hay además un cuarto valor en camino, chain, que permite encadenar explícitamente saltándose ancestros intermedios. A agosto de 2026 solo está en Chrome 150 y sigue marcado como experimental.