Atributo CSS overscroll-behavior

Definición y uso

overscroll-behavior La propiedad se utiliza para desactivar la cadena de desplazamiento (scroll chaining) o la retroalimentación de desplazamiento excesivo (overscroll affordance) del elemento cuando se intenta desplazar más allá de los límites del desplazamiento.

Cadena de desplazamiento: cuando se realiza un desplazamiento excesivo en un elemento, provoca el comportamiento de desplazamiento del elemento padre. Esto es el comportamiento predeterminado.

Feedback de desplazamiento excesivo: la retroalimentación proporcionada al usuario cuando intenta desplazarse más allá de los límites del desplazamiento. Por ejemplo, al intentar desplazarse más allá de la parte superior de la página en un dispositivo móvil, generalmente se muestra una retroalimentación visual y se actualiza la página.

overscroll-behavior El atributo es una forma abreviada de los siguientes atributos:

• overscroll-behavior-x
• overscroll-behavior-y

overscroll-behavior El valor del atributo se puede configurar de diferentes maneras:

Si el atributo overscroll-behavior tiene dos valores:

overscroll-behavior: none contain;

• En la dirección x: no hay comportamiento de desplazamiento excesivo
• En la dirección y: no hay cadena de desplazamiento, pero se permite la retroalimentación de desplazamiento excesivo

Si el atributo overscroll-behavior tiene un valor:

overscroll-behavior: contain;

• En las direcciones x e y: no hay cadena de desplazamiento, pero se permite la retroalimentación de desplazamiento excesivo

Ejemplo

Ejemplo 1

Cerrar la cadena de desplazamiento del elemento <div> desplazable:

#yellowDiv {
  overscroll-behavior: contain;
}

Intente hacerlo usted mismo

Ejemplo 2: Sintaxis de doble valor:

Establezca overscroll-behavior El valor de atributo se establece en auto nonePermite la cadena de desplazamiento y la retroalimentación de desplazamiento excesivo en la dirección x, pero no en la dirección y:

#pinkDiv {
  overscroll-behavior: auto none;
}

Intente hacerlo usted mismo

Sintaxis de CSS

overscroll-behavior: auto|contain|none|initial|inherit;

Valor de atributo

Detalles técnicos

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la propiedad.

* En Microsoft Edge, el valor de atributo 'none' se maneja como 'contain', lo que es incorrecto.

Páginas relacionadas

Referencia:Atributo CSS overscroll-behavior-x

Referencia:Atributo CSS overscroll-behavior-y

Referencia:Atributo CSS scroll-behavior

Referencia:Atributo CSS scroll-margin

Referencia:Atributo scroll-padding de CSS

Referencia:Atributo scroll-snap-align de CSS