CSS scroll-padding-inline-end egenskab

定义和用法

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

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

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

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

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

for at se scroll-padding-inline-end egenskabseffekten, skal scroll-snap-align egenskab, og sæt scroll-padding-inline-end og scroll-snap-type Egenskab

Eksempel

Eksempel 1

Sæt rullende indrykning i inline-orienteringen fra containerens ende til justeringspositionen til 20px:

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

Prøv det selv

Eksempel 2: Billedbibliotek

scroll-padding-inline-end Egenskaben kan bruges i gallerier med justeringsegenskaber til at skubbe billeder fra faste elementer bagud:

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

Prøv det selv

Eksempel 3

Når containerens element writing-mode Når egenskabsværdien sættes til 'vertical-rl', flytter begyndelsen af containeren og dens underordnede elementer fra venstre til toppen i inline-orienteringen, mens enden flytter fra højre til bunden. Dette påvirker rulningens justering og scroll-padding-inline-end Hvordan egenskaben fungerer:

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

Prøv det selv

Eksempel 4

Når containerens element direction Når egenskabsværdien sættes til 'rtl', flytter enden af containeren og dens underordnede elementer fra højre til venstre i inline-orienteringen. Dette påvirker rulningens justering og scroll-padding-inline-end Hvordan egenskaben fungerer:

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

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Tekniske detaljer

Browserstøtte

Tallene i tabellen viser den første browserversion, der fuldt ud understøtter egenskaben.

Relaterede sider

Referencer:CSS direction egenskab

Referencer:CSS scroll-snap-align egenskab

Referencer:CSS scroll-snap-type egenskab

Referencer:CSS writing-mode egenskab