Atributo CSS overscroll-behavior-y

Definición y uso

overscroll-behavior-y El atributo se utiliza para cerrar la cadena de desplazamiento o la retroalimentación de desbordamiento cuando se intenta desplazarse más allá de los límites de desplazamiento en la dirección y.

Cadena de desplazamientoSe refiere a que el desbordamiento en un elemento causará el comportamiento de desplazamiento del elemento padre. Esto es el comportamiento predeterminado.

DesbordamientoLa retroalimentación es la información proporcionada al usuario cuando intenta desplazarse más allá de los límites de desplazamiento. Por ejemplo, en dispositivos móviles, cuando se intenta desplazarse más allá de la parte superior de la página, a menudo se acompaña de una retroalimentación visual de actualización de la página.

Ejemplo

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

#yellowDiv {
  overscroll-behavior-y: contain;
}

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor Descripción
auto Permite el comportamiento de cadena de desplazamiento y retroalimentación de desbordamiento. Valor predeterminado.
contain Permite el comportamiento de retroalimentación de desbordamiento, pero no la cadena de desplazamiento.
none No permite retroalimentación de desbordamiento o comportamiento de cadena de desplazamiento.
initial Establece este atributo en su valor predeterminado. Ver: initial.
inherit Hereda este atributo de su elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado: auto
Herencia: No
Producción de animación: No se admite. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.overscrollBehaviorY="none"

Compatibilidad del navegador

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

Chrome Edge Firefox Safari Opera
63.0 18.0 * 59.0 16.0 50.0

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

Páginas relacionadas

Referencia:Atributo CSS overscroll-behavior

Referencia:Atributo CSS overscroll-behavior-block

Referencia:Atributo CSS overscroll-behavior-inline

Referencia:Atributo CSS overscroll-behavior-x

Referencia:Atributo CSS scroll-behavior

Referencia:Atributo CSS scroll-margin

Referencia:Atributo CSS scroll-padding

Referencia:Atributo CSS scroll-snap-align