Atributo CSS scroll-padding-inline-start

Definición y uso

scroll-padding-inline-start propiedad especifica la distancia desde la posición de inicio del contenedor hasta la posición de adhesión del elemento en la dirección de línea.

Esto significa que cuando detienes el desplazamiento, la barra de desplazamiento se ajusta rápidamente y se detiene a la distancia especificada entre la posición de adhesión y el contenedor.

La dirección de línea es la dirección en la que se coloca el siguiente carácter en relación con el carácter existente en la línea, también es la forma de disposición de etiquetas con CSS display: inline; (como las etiquetas <a> y <strong>) en el texto. La dirección de línea depende del idioma de escritura, por ejemplo, los caracteres árabes se colocan de derecha a izquierda, por lo que la dirección de línea es de derecha a izquierda, mientras que en las páginas en inglés, la dirección de línea es de izquierda a derecha. La dirección de línea se puede definir a través de la propiedad CSS direction y writing-mode definición.

La posición de adhesión es la posición en la que los elementos hijos se adhieren al contenedor cuando detienes el desplazamiento.

Nota:Esta propiedad solo se establece en la dirección de línea scroll-snap-align propiedad como 'start' para que funcione.

para ver scroll-padding-inline-start propiedad para ver su efecto, debe establecerse en los elementos hijos scroll-snap-align propiedad, y debe establecerse en el elemento padre scroll-padding-inline-start y scroll-snap-type Attribute.

Instance

Example 1

Set the scroll inner padding from the starting position of the container to the sticky position in the inline direction to 20px:

div {
  scroll-padding-inline-start: 20px;
}

Try it yourself

Example 2: Image library

scroll-padding-inline-start This attribute can be used in galleries with sticky behavior to push images out from behind fixed elements:

#container {
  scroll-padding-inline-start: 30px;
}

Try it yourself

Example 3

When the container element's writing-mode When the attribute value is set to 'vertical-rl', the starting position of the container and its child elements in the inline direction moves from the top to the right. This will affect the sticky scrolling behavior and scroll-padding-inline-start How the attribute works:

#container {
  scroll-padding-inline-start: 20px 0;
  writing-mode: vertical-rl;
}

Try it yourself

Example 4

When the container element's direction When the attribute value is set to 'rtl', the starting position of the container and its child elements in the inline direction moves from the right to the left, and the ending position of the container and its child elements moves from the right to the bottom. This will affect the sticky scrolling behavior and scroll-padding-inline How the attribute works:

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

Try it yourself

CSS Syntax

scroll-padding-inline-start: auto|value|initial|inherit;

Attribute value

Technical details

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

Páginas relacionadas

Referencia:Atributo direction de CSS

Referencia:Atributo CSS scroll-snap-align

Referencia:Atributo CSS scroll-snap-type

Referencia:Atributo writing-mode de CSS