Atributo CSS scroll-padding-block

Definición y uso

scroll-padding-block La propiedad especifica la distancia desde el contenedor hasta la posición de adhesión del elemento hijo en la dirección de bloque.

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

La dirección de bloque es la dirección en la que se coloca la próxima línea en relación con la posición de la línea actual, que también es la forma de disposición en la página de los elementos con CSS display: block; (como los elementos <p> y <div>) en la página. La dirección de bloque depende del idioma de escritura, por ejemplo, en el mongol, las nuevas líneas se alinean de izquierda a derecha, por lo que la dirección de bloque también es de izquierda a derecha, mientras que en las páginas en inglés, la dirección de bloque es hacia abajo. La dirección de bloque se puede definir a través de la propiedad CSS writing-mode Para definir.

La posición de adhesión es la posición a la que se adhiere el elemento hijo en el contenedor cuando detienes la barra de desplazamiento.

Nota:Esta propiedad solo es válida en la dirección de bloque,scroll-snap-align La propiedad es válida cuando se configura como 'start' o 'end'.

scroll-padding-block La propiedad es una abreviatura de las siguientes propiedades:

• scroll-padding-block-start
• scroll-padding-block-end

scroll-padding-block El valor de la propiedad se puede configurar de diferentes maneras:

Si el atributo scroll-padding-block tiene dos valores:

scroll-padding-block: 10px 50px;

• La distancia de inicio es de 10px
• La distancia de final es de 50px

Si el atributo scroll-padding-block tiene un valor:

scroll-padding-block: 10px;

• La distancia de inicio y final es de 10px

Para ver scroll-padding-block El efecto de las propiedades debe estar configurado en los elementos hijos scroll-snap-align scroll-snap-align scroll-padding-block y Atributo, y configure en el elemento padre scroll-snap-type

Atributo de CSS scroll-padding-block y scroll-padding-inline Atributo relacionado con el atributo CSS Atributo CSS scroll-padding-top,scroll-padding-bottom,scroll-padding-left y scroll-padding-right muy similar, pero scroll-padding-block y scroll-padding-inline El atributo depende de la dirección del bloque y la dirección en línea.

Ejemplo

Ejemplo 1

En la dirección del bloque, configure el margen interno de desplazamiento a 20px desde el contenedor a la posición de adherencia:

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

Intente hacerlo usted mismo

Ejemplo 2: Biblioteca de imágenes

scroll-padding-block El atributo puede utilizarse en galerías con comportamiento de adherencia para empujar las imágenes debajo de elementos fijos:

#container {
  scroll-padding-block: 30px 0;
}

Intente hacerlo usted mismo

Ejemplo 3

Cuando el elemento contenedor tiene writing-mode Cuando el valor del atributo se establece en vertical-rl, la posición de inicio del contenedor y los elementos hijos en la dirección del bloque se mueve desde la parte superior a la derecha, y la posición de finalización desde la parte inferior a la izquierda. Esto afecta el comportamiento de adherencia de desplazamiento y scroll-padding-block Manera de trabajar del atributo:

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

Intente hacerlo usted mismo

Sintaxis de CSS

scroll-padding-block: auto|value|initial|inherit;

Valor del atributo

Detalles técnicos

Compatibilidad del navegador

La tabla muestra la versión del navegador que admite completamente la propiedad por primera vez.

Páginas relacionadas

Referencia:Atributo CSS scroll-padding-block-end

Referencia:Atributo CSS scroll-padding-block-start

Referencia:Atributo CSS scroll-snap-align

Referencia:Atributo CSS scroll-snap-type

Referencia:Atributo writing-mode de CSS