CSS scroll-padding-inline eigenschap

Definitie en gebruik

scroll-padding-inline eigenschap specificeert de afstand van de container naar de aantrekkelijke positie van de onderliggende elementen in de inline-richting.

dit betekent dat wanneer je stopt met scrollen, de scrolling snel wordt aangepast en stopt op de aantrekkelijke positie en de afstand tussen de container en de aantrekkelijke positie van de onderliggende elementen.

De inline-richting verwijst naar de richting waarin de volgende teken wordt geplaatst ten opzichte van de bestaande tekens in een regel. Dit is ook de weergave van tags met CSS display: inline; (zoals <a> en <strong>-tags) in de tekst. De inline-richting hangt af van de schrijfwijze van de taal, bijvoorbeeld Arabisch heeft van rechts naar links gerangschikte nieuwe tekens, waardoor de inline-richting van rechts naar links is, terwijl Engelse pagina's een van links naar rechts richting hebben. De inline-richting kan worden ingesteld via de CSS-eigenschap direction 和 writing-mode definiëren.

de aantrekkelijke positie verwijst naar de positie waarin de onderliggende elementen in het container stoppen wanneer je stopt met scrollen.

Opmerking:deze eigenschap is alleen van toepassing op de inline-richting,scroll-snap-align de eigenschap is alleen effectief wanneer de waarde 'start' of 'end' is ingesteld.

De eigenschap scroll-padding-inline is een afkorting van de volgende eigenschappen:

• scroll-padding-inline-start
• scroll-padding-inline-end

scroll-padding-inline de waarde van de eigenschap kan op verschillende manieren worden ingesteld:

Als de eigenschap scroll-padding-inline twee waarden heeft:

scroll-padding-inline: 10px 50px;

• de afstand van het begin is 10px
• de afstand van het einde is 50px

Als de waarde van de eigenschap scroll-padding-inline een waarde heeft:

scroll-padding-inline: 10px;

• de afstand van het begin en het einde is 10px

om te zien scroll-padding-inline eigenschapseffecten, moeten ze worden ingesteld op de onderliggende elementen scroll-snap-align eigenschap en stel in op de oude elementen scroll-padding-inline 和 scroll-snap-type eigenschappen.

CSS- scroll-padding-block 和 scroll-padding-inline Eigenschappen en CSS-eigenschappen CSS scroll-padding-top eigenschap,scroll-padding-beneden,scroll-padding-left 和 scroll-padding-right 非常相似，但 scroll-padding-block 和 scroll-padding-inline 属性依赖于块方向和行内方向。

实例

例子 1

设置行内方向上的滚动内边距，从容器到吸附位置为 20px：

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

亲自试一试

例子 2：图片库

在具有吸附行为的图片画廊中，可以使用 scroll-padding-inline 属性将图片从固定元素后面推出：

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

亲自试一试

例子 3

当容器元素的 writing-mode 属性值设置为 'vertical-rl' 时，行内方向上的容器和子元素的起始位置从左侧移动到顶部，结束位置从右侧移动到底部。这会影响滚动吸附行为以及 scroll-padding-inline 属性的工作方式：

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

亲自试一试

例子 4

当容器元素的 direction 属性值设置为 'rtl' 时，行内方向上的容器和子元素的起始位置从右侧移动到左侧。这会影响滚动吸附行为以及 scroll-padding-inline 属性的工作方式：

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

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

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

相关页面

Referentie:CSS richting eigenschap

Referentie:CSS scroll-snap-align eigenschap

Referentie:CSS scroll-snap-type eigenschap

Referentie:CSS writing-mode eigenschap