Atributo CSS scroll-padding-right

Definición y uso

scroll-padding-right propiedad especifica la distancia desde el lado derecho del contenedor hasta la posición de adhesión del elemento hijo.

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

la posición de adhesión por scroll-snap-align propiedad de configuración del modo de escritura, pero también puede estar influenciada por las propiedades CSS direction y writing-mode influencia.

Atención:Esta propiedad solo es efectiva cuando el punto de adhesión se configura en el lado derecho del elemento hijo.

para ver scroll-padding-right propiedades en el elemento padre, y debe configurarse scroll-snap-align propiedades, y configure scroll-padding-right y scroll-snap-type La propiedad.

Ejemplo

Ejemplo 1

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

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

Intente usted mismo

Ejemplo 2: Biblioteca de imágenes

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

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

Intente usted mismo

Ejemplo 3: Establecer margen interior en la derecha

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

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

Intente usted mismo

Ejemplo 4: Punto de adhesión

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

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

Intente usted mismo

Sintaxis de CSS

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

Valor del atributo

Detalles técnicos

Compatibilidad del navegador

La tabla muestra la versión del navegador que es el primero en soportar completamente esta propiedad.

Páginas relacionadas

Referencia:Atributo direction de CSS

Referencia:Atributo CSS scroll-snap-align

Referencia:Atributo CSS scroll-snap-type

Referencia:CSS propiedad writing-mode