Atributo CSS scroll-padding-left

Definición y uso

scroll-padding-left propiedad especifica la distancia desde el lado izquierdo del contenedor hasta la posición de adhesión del elemento secundario.

La posición de adhesión se refiere a la ubicación en la que el elemento secundario se adhiere al contenedor cuando se detiene el desplazamiento.

La posición de adhesión se determina por scroll-snap-align propiedad se establece, pero también puede estar influenciada por las propiedades CSS direction y writing-mode influencia.

Atención:Este atributo solo es válido cuando la posición de adhesión se establece en el lado izquierdo del elemento secundario.

ver scroll-padding-left en el elemento hijo para ver el efecto de scroll-snap-align Las propiedades, y debe establecerse la propiedad scroll-padding-left y scroll-snap-type La propiedad.

Ejemplo

Ejemplo 1

Establezca el margen interno de desplazamiento en 20px desde el lado izquierdo del contenedor al punto de adhesión:

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

Intente usted mismo

Ejemplo 2: Biblioteca de imágenes

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

#container > img {
  scroll-padding-left: 30px;
}

Intente usted mismo

Ejemplo 3: Establecer margen interno en el lado izquierdo

Cuando se establecen comportamientos de adhesión en ambas direcciones, también se puede establecer en el contenedor scroll-padding-left La propiedad. Deslice horizontalmente al siguiente elemento para ver el efecto:

#container > div {
  scroll-padding-left: 30px;
}

Intente usted mismo

Ejemplo 4: Posición de adhesión

Para hacer que scroll-padding-left La propiedad debe estar activa, y la posición de adhesión debe establecerse en el lado izquierdo del elemento hijo. En este ejemplo,direction El valor de la propiedad 'rtl' cambiará la posición de adhesión desde el lado izquierdo del elemento hijo al lado derecho. Al usar este código,scroll-padding-left La propiedad ya no tendrá efecto:

#container {
  direction: rtl;
  scroll-padding-left: 30px;
}
#container > div {
  scroll-snap-align: none start;
}

Intente usted mismo

Sintaxis de CSS

scroll-padding-left: 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 la propiedad.

Páginas relacionadas

Referencia:Atributo CSS direction

Referencia:Atributo CSS scroll-snap-align

Referencia:Atributo CSS scroll-snap-type

Referencia:CSS propiedad writing-mode