Atributo CSS scroll-padding-inline-end

Definición y uso

scroll-padding-inline-end Este atributo especifica la distancia en la dirección en línea entre el extremo del contenedor y la posición de alineación del elemento secundario.

Esto significa que, cuando detienes el desplazamiento, la barra de desplazamiento se ajustará rápidamente y se detendrá en la distancia especificada entre la posición de alineació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 el carácter existente en la línea, lo que también es el modo de disposición en texto de etiquetas con CSS display: inline; (como las etiquetas <a> y <strong>), en el texto. La dirección en línea depende del idioma de escritura, por ejemplo, los nuevos caracteres en árabe se alinean de derecha a izquierda, por lo que la dirección en línea es de derecha a izquierda, mientras que la dirección en línea en las páginas en inglés es de izquierda a derecha. La dirección en línea se puede cambiar a través del atributo CSS direction y writing-mode Definición.

La posición de alineación se refiere a la posición en la que los elementos secundarios se alinean en el contenedor cuando detienes el desplazamiento.

Atención:Este atributo solo se aplica en scroll-snap-align Este atributo solo se aplica cuando el ajuste de dirección en línea se establece en 'end'.

para ver scroll-padding-inline-end Atributo en el elemento padre, y establezca scroll-snap-align Atributo, y establezca scroll-padding-inline-end y scroll-snap-type Atributo.

Ejemplo

Ejemplo 1

Establezca el margen de relleno en línea hacia la posición de alineación desde el extremo del contenedor en 20px:

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

Intente usted mismo

Ejemplo 2: biblioteca de imágenes

scroll-padding-inline-end El atributo se puede usar en galerías con comportamiento de alineación para empujar las imágenes detrás de un elemento fijo:

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

Intente usted mismo

Ejemplo 3

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

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

Intente usted mismo

Ejemplo 4

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

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

Intente usted mismo

Sintaxis de CSS

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

páginas relacionadas

Referencia:Atributo direction de CSS

Referencia:Atributo CSS scroll-snap-align

Referencia:Atributo CSS scroll-snap-type

Referencia:Atributo writing-mode de CSS