CSS scroll-margin-inline-end eigenschap

Definitie en gebruik.

scroll-margin-inline-end De eigenschap specificeert de afstand tussen de vastgestelde positie en het container in de richting van de lijn.

Dit betekent dat de scrolling snel wordt aangepast en stopt op de vastgestelde afstand in de richting van de lijn, wat de afstand is tussen de vastgestelde positie van het einde van het subelement en het container.

De richting van de lijn is de richting waarin de volgende karakters ten opzichte van de bestaande karakters in de lijn worden geplaatst. Dit is ook de lay-outwijze van tags met CSS display: inline; (zoals <a> en <strong>-tags) in de tekst. De richting van de lijn hangt af van de schrijftaal, bijvoorbeeld worden de nieuwe karakters in het Arabisch van rechts naar links gerangschikt, dus de richting van de lijn is van rechts naar links. Op de Engelse pagina's is de richting van de lijn van links naar rechts. De richting van de lijn kan worden aangepast via de CSS-eigenschap direction 和 writing-mode Definitie.

De vastgestelde positie is de plek waar de subelementen in het container vastklemmen wanneer je het scrollen stopt.

注意：此属性仅在行内方向上设置了 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 属性 CSS scroll-margin-top eigenschap、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;

属性值

技术细节

浏览器支持

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

相关页面

Referentie:CSS richting eigenschap

Referentie:CSS scroll-snap-align eigenschap

Referentie:CSS scroll-snap-type eigenschap

Referentie:CSS writing-mode eigenschap