Atributo scroll-margin-inline-end de CSS

Definición y uso

scroll-margin-inline-end El atributo especifica la distancia entre la posición de adsorción y el contenedor en la dirección en línea.

Esto significa que cuando detienes el desplazamiento, la barra de desplazamiento se ajusta rápidamente y se detiene a la distancia especificada en la dirección en línea, que es la distancia entre la posición de adsorción del extremo del elemento secundario y el contenedor.

La dirección en línea es la posición en la que se coloca el siguiente carácter en relación con el carácter existente en la línea, también es el modo de disposición en el texto de las etiquetas con CSS display: inline; (como las etiquetas <a> y <strong>). La dirección en línea depende del idioma de escritura, por ejemplo, los caracteres árabes se colocan de derecha a izquierda, por lo que la dirección en línea es de derecha a izquierda, mientras que en las páginas en inglés, la dirección en línea es de izquierda a derecha. La dirección en línea se puede cambiar a través del atributo CSS direction 和 writing-mode Definición.

La posición de adsorción es la ubicación a la que se adhiere el elemento secundario dentro del contenedor cuando detienes el desplazamiento.

注意：此属性仅在行内方向上设置了 scroll-snap-align 属性为 'end' 时才起作用。

要看到 scroll-margin-inline-end 属性的效果，必须在子元素上设置 scroll-margin-inline-end 和 scroll-snap-align 属性，并在父元素上设置 scroll-snap-type 属性。

CSS 的 scroll-margin-inline 和 scroll-margin-block 属性与 CSS 属性 Atributo scroll-margin-top de CSS、scroll-margin-bottom、scroll-margin-left 和 scroll-margin-right 非常相似，但 scroll-margin-block 和 scroll-margin-inline 属性依赖于块方向和行内方向。

实例

例子 1

设置行内方向上从吸附位置到可滚动容器的距离：

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

亲自试一试

例子 2

当 <div> 元素的 writing-mode 属性值设置为 vertical-rl 时，行内方向是向下。结果是元素的末端从右侧移动到底部：

div {
  scroll-margin-inline-end: 20px;
  writing-mode: vertical-rl;
}

亲自试一试

例子 3

当 <div> 元素的 direction 属性值设置为 rtl 时，行内方向是从右到左。结果是元素的末端从右侧移动到左侧：

div {
  scroll-margin-inline-end: 20px;
  direction: rtl;
}

亲自试一试

CSS 语法

scroll-margin-inline-end: 0|value|initial|inherit;

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

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