CSS scroll-padding-inline-end -ominaisuus

定义和用法

scroll-padding-inline-end 属性指定了从容器末端到子元素对齐位置之间在行内方向上的距离。

这意味着，当你停止滚动时，滚动将快速调整并停止在对齐位置与容器之间指定的距离处。

行内方向是指下一字符相对于现有字符在行中的位置放置的方向，这也是具有 CSS display: inline; 的标签（如 <a> 和 <strong> 标签）在文本中的布局方式。行内方向取决于书写语言，例如阿拉伯语的新字符是从右到左排列的，因此行内方向是从右到左的，而英文页面的行内方向是从左到右的。行内方向可以通过 CSS 属性 direction ja writing-mode 定义。

对齐位置是指当你停止滚动时，子元素在容器中对齐到位的位置。

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

nähdäksesi scroll-padding-inline-end Ominaisuus, mutta sen vaikutuksen näkemiseksi on asetettava lapsielementille scroll-snap-align Ominaisuudet, ja aseta vanhemmalle elementille scroll-padding-inline-end ja scroll-snap-type Ominaisuus.

Esimerkki

Esimerkki 1

Aseta kontteeraajan loppupäästä kohdistusasentoon sisäiseen suuntaan 20px:ksi:

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

Kokeile itse

Esimerkki 2: Kuvakokoelma

scroll-padding-inline-end Ominaisuus voidaan käyttää tarkoitukseen, jossa on kohdistus toiminto, kuten kuvagalleriassa, jotta kuvat tuodaan kiinteän elementin taakse:

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

Kokeile itse

Esimerkki 3

Kun konttietueen elementin writing-mode Ominaisuuden arvo asetettuna 'vertical-rl'ksi, siirtää kontteinereiden ja niiden lapsien alkupää sisäiseen suuntaan vasemmalta ylös ja loppupää oikealta alas. Tämä vaikuttaa pyörimisasentoon sekä scroll-padding-inline-end Ominaisuuden toimintatapa:

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

Kokeile itse

Esimerkki 4

Kun konttietueen elementin direction Ominaisuuden arvo asetettuna 'rtl'ksi, siirtää konteinereiden ja niiden lapsien loppupää sisäiseen suuntaan oikeasta vasemmalle. Tämä vaikuttaa pyörimisasentoon sekä scroll-padding-inline-end Ominaisuuden toimintatapa:

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

Kokeile itse

CSS-kieli

scroll-padding-inline-end: auto|value|initial|inherit;

Ominaisuuden arvo

Tekninen yksityiskohta

Selaimen tuki

Taulukossa olevat numerot ilmaisevat ensimmäisen täysin tukevan selaimen version.

Vastaavat sivut

Viittaus:CSS suunta ominaisuus

Viittaus:CSS scroll-snap-align -ominaisuus

Viittaus:CSS scroll-snap-type -ominaisuus

Viittaus:CSS writing-mode ominaisuus