Atributo CSS scroll-padding-block-end

Definición y uso

scroll-padding-block-end La propiedad especifica la distancia en la dirección del bloque, desde el extremo 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 el punto de adherencia y en la distancia especificada entre el contenedor y el punto de adherencia.

La dirección del bloque se refiere a la posición relativa al renglón actual, la dirección en la que se colocará el siguiente renglón. 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 nuevo renglón en el mongol se alinea de izquierda a derecha, por lo tanto, la dirección del bloque es de izquierda a derecha, mientras que en la página en inglés, la dirección del bloque es hacia abajo. La dirección del bloque se puede especificar mediante la propiedad CSS writing-mode para definir.

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

Nota:Este atributo solo funciona en la dirección del bloque scroll-snap-align el atributo establecido en 'end' para que funcione.

para ver scroll-padding-block-end en el elemento padre, y debe configurarse scroll-snap-align atributo, y configure el atributo scroll-padding-block-end y scroll-snap-type atributo.

Ejemplo

Ejemplo 1

Establezca el margen interior de desplazamiento en la dirección del bloque desde el extremo final del contenedor al punto de adhesión en 20px:

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

Intente usted mismo

Ejemplo 2: biblioteca de imágenes

En una galería de imágenes con comportamiento de adhesión, se puede usar scroll-padding-block-end El atributo empuja la imagen hasta el elemento fijo superior:

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

Intente usted mismo

Ejemplo 3

Cuando el elemento contenedor writing-mode Cuando el valor del atributo se establece en vertical-rl, el extremo final del contenedor en la dirección del bloque y los elementos hijos se mueven desde la parte inferior a la izquierda. Esto afecta el comportamiento de adhesión al desplazamiento y scroll-padding-block-end Manera de trabajar del atributo:

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

Intente usted mismo

Sintaxis de CSS

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

Valor del atributo

Detalles técnicos

Compatibilidad del navegador

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

páginas relacionadas

Referencia：Atributo CSS scroll-snap-align

Referencia：Atributo CSS scroll-snap-type

Referencia：Atributo writing-mode de CSS