Atributo scroll-padding-inline de CSS

Definición y uso

scroll-padding-inline Atributo que especifica la distancia desde el contenedor al punto de adhesión del elemento hijo en la dirección en línea.

Esto significa que cuando detienes la barra de desplazamiento, la barra de desplazamiento se ajustará rápidamente y se detendrá en la distancia especificada entre la posición de adhesión y el contenedor.

La dirección en línea se refiere a la dirección en la que se coloca el siguiente carácter en relación con los caracteres existentes en una línea. Esto también es la forma en que los elementos con CSS display: inline; (como los elementos <a> y <strong>) se disponen en el texto. La dirección en línea depende del idioma de escritura, por ejemplo, los caracteres árabes se alinean de derecha a izquierda, lo que hace que la dirección en línea sea de derecha a izquierda, mientras que las páginas en inglés tienen una dirección en línea de izquierda a derecha. La dirección en línea se puede definir a través del atributo CSS direction y writing-mode para definir.

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

Nota:Este atributo solo se aplica en la dirección en línea,scroll-snap-align Es efectivo solo cuando el atributo se establece en 'start' o 'end'.

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

• scroll-padding-inline-start
• scroll-padding-inline-end

scroll-padding-inline El valor del atributo se puede configurar de diferentes maneras:

Si el atributo scroll-padding-inline tiene dos valores:

scroll-padding-inline: 10px 50px;

• La distancia desde el principio es de 10px
• La distancia desde el final es de 50px

Si el atributo scroll-padding-inline tiene un valor:

scroll-padding-inline: 10px;

• La distancia desde el principio y el final es de 10px

para ver scroll-padding-inline Atributo para ver el efecto, debe establecerse en el elemento hijo scroll-snap-align Atributo, y debe establecerse en el elemento padre scroll-padding-inline y scroll-snap-type .

Atributo de CSS scroll-padding-block y scroll-padding-inline Atributo y atributo CSS Atributo scroll-padding-top de CSS,scroll-padding-bottom,scroll-padding-left y scroll-padding-right son muy similares, pero scroll-padding-block y scroll-padding-inline El atributo depende de la dirección de bloque y la dirección de línea interna.

Ejemplo

Ejemplo 1

Establecer el margen interno de desplazamiento en la dirección de línea interna, desde el contenedor hasta la posición de sujeción 20px:

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

Intente usted mismo

Ejemplo 2: Biblioteca de imágenes

En una galería de imágenes con comportamiento de sujeción, se puede usar scroll-padding-inline El atributo empuja la imagen detrás del elemento fijo:

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

Intente usted mismo

Ejemplo 3

Cuando el elemento del contenedor writing-mode Cuando el valor del atributo se establece en 'vertical-rl', la posición de inicio del contenedor y de los elementos hijos en la dirección de línea interna se mueve desde la izquierda a la parte superior, y la posición de finalización desde la derecha a la parte inferior. Esto afecta el comportamiento de sujeción de desplazamiento y scroll-padding-inline Manera de trabajar del atributo:

#container {
  scroll-padding-inline: 20px 0;
  writing-mode: vertical-rl;
}

Intente usted mismo

Ejemplo 4

Cuando el elemento del contenedor direction Cuando el valor del atributo se establece en 'rtl', la posición de inicio del contenedor y de los elementos hijos en la dirección de línea interna se mueve desde la derecha a la izquierda. Esto afecta el comportamiento de sujeción de desplazamiento y scroll-padding-inline Manera de trabajar del atributo:

#container {
  scroll-padding-inline: 20px 0;
  direction: rtl;
}

Intente usted mismo

Sintaxis de CSS

scroll-padding-inline: 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 completamente admite esta propiedad.

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