Atributo CSS overscroll-behavior-inline

Página anterior overscroll-behavior-block
Página siguiente overscroll-behavior-x

Definición y uso

overscroll-behavior-inline La propiedad se utiliza para cerrar la cadena de desplazamiento del elemento o el reacción de desbordamiento cuando se intenta desplazar más allá de los límites de desplazamiento en la dirección del flujo.

Nota:Para activar overscroll-behavior en la dirección del flujo, es posible que necesite usar gestos de deslizamiento en el trackpad o la pantalla táctil.

La cadena de desplazamiento es el comportamiento de desplazamiento del elemento padre que se desplaza cuando se desplaza excesivamente en un elemento. Esto es el comportamiento predeterminado.

La retroalimentación de desplazamiento excesivo es la retroalimentació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.

CSS overscroll-behavior-inline y overscroll-behavior-block El atributo es similar a overscroll-behavior-x y overscroll-behavior-y El atributo es muy similar, pero overscroll-behavior-inline y overscroll-behavior-block El atributo depende de la dirección de bloque y la dirección en línea.

Nota:Atributos CSS relacionados writing-mode Define la dirección en línea. Esto afecta si la dirección en línea está en el eje x o en el eje y, así como overscroll-behavior-inline El resultado del atributo. Para las páginas en inglés, la dirección en línea es de izquierda a derecha y la dirección de bloque es hacia abajo.

Ejemplo

Ejemplo 1

Cierre la cadena de desplazamiento en la dirección en línea del elemento <div> desplazable:

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

Intente hacerlo usted mismo

Ejemplo 2: Combinación con el atributo writing-mode

Cambie la dirección en línea del elemento <div> writing-mode Cuando el valor del atributo se establece en 'vertical-rl', la dirección en línea se convierte en el eje y, por lo tanto overscroll-behavior-inline Ahora actúa en el eje y, en lugar de en el eje x:

#yellowDiv {
  writing-mode: vertical-rl;
  overscroll-behavior-inline: contain;
}

Intente hacerlo usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor	Descripción
auto	Permite el comportamiento de cadena de desplazamiento y retroalimentación de desplazamiento excesivo. Valor predeterminado.
contain	Permite el comportamiento de retroalimentación de desplazamiento excesivo, pero no permite la cadena de desplazamiento.
none	No permite retroalimentación de desplazamiento excesivo o comportamiento de cadena de desplazamiento.
initial	Establezca este atributo en su valor predeterminado. Véase initial.
inherit	Hereda este atributo de su elemento padre. Véase inherit.

Detalles técnicos

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