Atributo CSS scroll-padding-bottom

定义和用法

scroll-padding-bottom 属性指定从容器底部到子元素吸附位置的距离。

吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。吸附位置通过 scroll-snap-align 属性设置，但也可能受到 CSS 属性 direction y writing-mode 的影响。

}Nota:

Este atributo solo es efectivo cuando la posición de adhesión se establece en la parte inferior del elemento hijo. scroll-padding-bottom El efecto del atributo debe establecerse en el elemento hijo para ver scroll-snap-align Atributo, y configure el atributo scroll-padding-bottom y scroll-snap-type Atributo.

Ejemplo

Ejemplo 1

Establezca el relleno de desplazamiento desde la parte inferior del contenedor a la posición de adhesión en 20px:

div {
  scroll-padding-bottom: 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-bottom El atributo empuja la imagen hacia arriba del elemento fijo:

#container {
  scroll-padding-bottom: 30px;
}

Intente usted mismo

Ejemplo 3: Establecer relleno inferior de desplazamiento

Cuando se establecen comportamientos de adhesión en dos direcciones, también se puede establecer en el contenedor scroll-padding-bottom El atributo. Desplácese verticalmente al siguiente elemento para ver el efecto:

#container {
  scroll-padding-bottom: 30px;
}

Intente usted mismo

Ejemplo 4: Posición de adhesión

Para hacer que scroll-padding-bottom El atributo entra en vigencia, y la posición de adhesión debe establecerse en la parte inferior del elemento hijo. En este ejemplo,writing-mode El atributo cambia la posición de adhesión desde la parte inferior del elemento hijo a la izquierda. Al usar este código,scroll-padding-bottom El atributo ya no tendrá efecto:

#container {
  writing-mode: vertical-rl;
  scroll-padding-bottom: 30px;
}
#container > div {
  scroll-snap-align: end none;
}

Intente usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor Descripción
auto Valor predeterminado. El navegador calcula el relleno.
longitud

Especifique scroll-padding-bottom en unidades como px, pt, cm, etc.

No se permiten valores negativos. Véase:Unidades CSS.
% Especifique el porcentaje del ancho del elemento contenedor como el margen interior.
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 animación: No se admite. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.scrollPaddingBottom="20px"

Compatibilidad del navegador

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

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