Atributo CSS scroll-padding-block-start

Definición y uso

scroll-padding-block-start La propiedad especifica la distancia en la dirección del bloque, desde la posición de inicio del contenedor hasta la posición de adherencia del elemento hijo.

Esto significa que cuando detengas el desplazamiento, se ajustará rápidamente y se detendrá en la distancia especificada entre la posición de adherencia y el contenedor en la dirección del bloque.

La dirección del bloque se refiere a la posición relativa con respecto a la línea existente, la dirección en la que se coloca la próxima línea. Esto también es la forma de disposición en la página de los elementos con CSS display: block; (como las etiquetas <p> y <div>). La dirección del bloque depende del idioma de escritura, por ejemplo, el mongol se escribe de izquierda a derecha, por lo que la dirección del bloque es de izquierda a derecha, mientras que la dirección del bloque en la página en inglés es hacia abajo. La dirección del bloque se puede especificar mediante la propiedad CSS writing-mode to define.

The snap position refers to the position where the child element snaps to in the container when you stop scrolling. It is defined by

Note:This attribute is only for the block direction scroll-snap-align attribute takes effect only when set to 'start'.

to see scroll-padding-block-start attribute on the parent element, and set scroll-snap-align attributes, and set the scroll-padding-block-start and scroll-snap-type attribute.

Instance

Example 1

Set the block direction scroll inner padding from the container starting position to the snap position to 20px:

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

Try It Yourself

Example 2: Image Library

In a picture gallery with snap behavior, you can use scroll-padding-block-start The attribute pushes the image below the fixed element:

#container {
  scroll-padding-block-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 in the block direction and the child elements move from the top to the right. This will affect the scroll snap behavior and scroll-padding-block-start How the attribute works:

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

Try It Yourself

CSS Syntax

scroll-padding-block-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 attribute.

Páginas relacionadas

Referencia:Atributo CSS scroll-snap-align

Referencia:Atributo CSS scroll-snap-type

Referencia:Atributo writing-mode de CSS