Cómo controlar el comportamiento de desplazamiento con overscroll-behavior en CSS
¿Qué es overscroll-behavior y cómo se utiliza?
overscroll-behavior define cómo reaccionará el navegador cuando se llega al límite de un contenedor de desplazamiento. Permite evitar efectos de desplazamiento inesperados, como el scroll de página que ocurre al llegar al final de un contenedor interno.
Sintaxis básica:
.elemento {
overscroll-behavior: contain;
}
En este ejemplo, el contenedor .elemento no propagará el evento de desplazamiento al cuerpo de la página cuando se llegue al límite.
Valores de overscroll-behavior
1. auto: Valor predeterminado. El desplazamiento se comporta de manera normal y los eventos de scroll se propagan al contenedor padre.
2. contain: El evento de scroll no se propaga a los elementos externos, evitando que otros contenedores respondan al scroll al llegar al final.
3. none: Desactiva por completo cualquier efecto de rebote o desplazamiento adicional. Útil para evitar el desplazamiento de fondo en móviles o aplicaciones.
Propiedades relacionadas:
-
overscroll-behavior-x: Controla el comportamiento en el eje horizontal (x). -
overscroll-behavior-y: Controla el comportamiento en el eje vertical (y).
Ejemplos de uso con overscroll-behavior
1. Evitar el desplazamiento de página desde un contenedor interno:
.contenedor-interno {
height: 300px;
overflow-y: scroll;
overscroll-behavior: contain;
}Este contenedor evita que, al llegar al final del desplazamiento, el evento de scroll se propague y haga que la página principal también se desplace.
2. Desactivar el efecto de rebote en móviles:
.contenedor-sin-rebote {
height: 300px;
overflow-y: scroll;
overscroll-behavior: none;
}
Al usar overscroll-behavior: none, se desactivan los efectos de rebote y el desplazamiento no afectará a ningún contenedor externo.
3. Controlar el scroll horizontal y vertical de forma independiente:
.contenedor-horizontal {
width: 500px;
overflow-x: auto;
overscroll-behavior-x: contain;
}
.contenedor-vertical {
height: 400px;
overflow-y: auto;
overscroll-behavior-y: none;
}
En este caso, overscroll-behavior-x evita que el scroll horizontal se propague, mientras que overscroll-behavior-y desactiva el desplazamiento adicional en el eje vertical.
¿Cuándo usar overscroll-behavior?
- En interfaces con scroll anidado: para evitar que el desplazamiento en contenedores internos mueva el fondo o contenedores principales.
- Al diseñar aplicaciones móviles: para evitar efectos de rebote en contenedores con desplazamiento.
- En secciones específicas de contenido desplazable: como carruseles horizontales o menús de navegación, donde se quiera un control preciso del scroll.
Referencia oficial
Para más detalles sobre esta propiedad, consulta la documentación oficial de MDN sobre overscroll-behavior.
Jorge García
Fullstack developer