Atributo scroll-padding-top de CSS

Definición y uso

scroll-padding-top La propiedad especifica la distancia desde la parte superior del contenedor hasta la posición de adhesión del elemento hijo.

La posición de adhesión se refiere a la ubicación a la que se adhiere el elemento hijo dentro del contenedor cuando se detiene el desplazamiento.

La posición de adhesión se scroll-snap-align La configuración de la propiedad, pero también puede verse afectada por las propiedades CSS Propiedad de dirección y writing-mode El impacto.

Nota:Este atributo solo es efectivo cuando la posición de adhesión se configura en la parte superior del elemento hijo.

Para ver scroll-padding-top el efecto de la propiedad debe configurarse en el elemento hijo scroll-snap-align La propiedad, y debe configurarse la propiedad scroll-padding-top y scroll-snap-type La propiedad.

Ejemplo

Ejemplo 1

Establezca el margen interior de desplazamiento en 20px desde la parte superior del contenedor hasta la posición de adhesión:

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

Intente hacerlo usted mismo

Ejemplo 2: Biblioteca de imágenes

scroll-padding-top La propiedad se puede usar en galerías con comportamiento de adhesión para empujar las imágenes debajo de un elemento fijo:

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

Intente hacerlo usted mismo

Ejemplo 3: Establecer el margen interior de desplazamiento en la parte superior

Cuando se han configurado comportamientos de adhesión en ambas direcciones, también se puede configurar en el contenedor scroll-padding-top La propiedad. Desplácese verticalmente al siguiente elemento para ver el efecto:

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

Intente hacerlo usted mismo

Ejemplo 4: Posición de adhesión

Para hacer que scroll-padding-top La propiedad debe estar activa, y la posición de adhesión debe estar configurada en la parte superior del elemento hijo. En este ejemplo,writing-mode Al usar este código, la propiedadscroll-padding-top La propiedad ya no tendrá efecto:

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

Intente hacerlo usted mismo

Sintaxis de CSS

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

Valor del atributo

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

Especifique scroll-padding-top con unidades como px, pt, cm, etc.

No se permite el uso de valores negativos. Vea:Unidades CSS.
% Especifique el porcentaje del ancho del elemento contenido como el margen interior.
initial Establezca este atributo en su valor predeterminado. Vea: initial.
inherit Hereda este atributo de su elemento padre. Vea: 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.scrollPaddingTop="20px"

Compatibilidad del navegador

La tabla de números representa la versión del navegador que admite completamente la propiedad por primera vez.

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 scroll-snap-align de CSS

Referencia:Atributo scroll-snap-type de CSS

Referencia:Atributo writing-mode de CSS