Atributo CSS scroll-padding

Definición y uso

scroll-padding Este atributo especifica la distancia desde el contenedor hasta la posición de adhesión del elemento hijo.

Esto significa que, cuando detienes el desplazamiento, la barra de desplazamiento se ajusta rápidamente y se detiene a la distancia especificada del contenedor al elemento hijo de adhesión.

La posición de adhesión es la posición en la que el elemento hijo se fija en el contenedor cuando se detiene el desplazamiento.

scroll-padding Este atributo es una abreviatura de los siguientes atributos:

scroll-padding Los valores del atributo se pueden configurar de diferentes maneras:

Si el atributo scroll-padding tiene cuatro valores:

scroll-padding: 15px 30px 60px 90px;
  • La distancia superior es de 15px
  • La distancia lateral derecha es de 30px
  • La distancia inferior es de 60px
  • La distancia lateral izquierda es de 90px

Si el atributo scroll-padding tiene tres valores:

scroll-padding: 15px 30px 60px;
  • La distancia superior es de 15px
  • la distancia en el lado izquierdo y derecho es de 30px
  • La distancia inferior es de 60px

Si el atributo scroll-padding tiene dos valores:

scroll-padding: 15px 30px;
  • La distancia entre la parte superior e inferior es de 15px
  • la distancia en el lado izquierdo y derecho es de 30px

Si el atributo scroll-padding tiene un valor:

scroll-padding: 10px;
  • las distancias en todas las cuatro direcciones son de 10px

para ver scroll-padding propiedad en el elemento padre, el efecto de estas propiedades debe establecerse en el elemento hijo scroll-snap-align propiedad, y se establece scroll-padding y scroll-snap-type propiedad.

Nota:En el siguiente ejemplo, se han establecido los márgenes interiores en todos los lados, pero debido a scroll-snap-align Establecido en "start", por lo que solo cambia el comportamiento del margen interior de la parte superior.

Ejemplo

Ejemplo 1

Establece el margen interior de desplazamiento desde el contenedor al punto de adhesión en 20px:

div {
  scroll-padding: 20px;
}

Prueba tu mismo

Ejemplo 2: Biblioteca de imágenes

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

#container {
  scroll-padding: 30px 0 0 0;
}
Elemento superior fijo
Pekín Bailarín Wuhan Tulipa Hangzhou

Prueba tu mismo

Ejemplo 3: Establecer el margen interior de desplazamiento en la parte inferior y lateral

scroll-padding La propiedad se puede establecer en la parte inferior y lateral del contenedor al mismo tiempo. Desplázate horizontal y verticalmente al siguiente elemento para ver el efecto:

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





Prueba tu mismo

Sintaxis de CSS

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

Valor del atributo

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

Especifica el margen interior en unidades como px, pt, cm, etc.

No se permiten valores negativos. Ver:Unidades CSS.
% Especifica el margen interior en porcentaje en relación con el ancho del elemento contenedor.
initial Establece esta propiedad en su valor por defecto. Ver initial.
inherit Hereda esta propiedad del elemento padre. Ver inherit.

Detalles técnicos

Valor por defecto: auto
Herencia: No
Producción de animación: No soportado. Ver:Propiedades relacionadas con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.scrollPadding="20px"

Compatibilidad del navegador

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Páginas relacionadas

Referencia:Atributo CSS scroll-padding-bottom

Referencia:Atributo CSS scroll-padding-left

Referencia:Atributo CSS scroll-padding-right

Referencia:Atributo CSS scroll-padding-top

Referencia:Atributo CSS scroll-snap-align

Referencia:Atributo CSS scroll-snap-type