Mfano wa CSS scroll-padding-right

定义和用法

scroll-padding-right 属性指定从容器右侧到子元素吸附位置的距离。

吸附位置是指在停止滚动时，子元素在容器中吸附到位的位置。

吸附位置由 scroll-snap-align mipangilio wa kifaa cha CSS, pia inaweza kumwengwa na kifaa cha CSS direction 和 writing-mode musababu ya.

Kweli:此属性仅在吸附位置设置在子元素右侧时有效。

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

实例

例子 1

将滚动内边距设置为从容器右侧到吸附位置的距离为 20px：

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

亲自试一试

例子 2：图片库

scroll-padding-right 属性可用于具有吸附行为的图片画廊，以将图片从固定元素后面推入视图中：

#container > img {
  scroll-padding-right: 30px;
}

亲自试一试

例子 3：在右侧设置滚动内边距

当在两个方向上都设置了吸附行为时，也可以在容器上设置 scroll-padding-right 属性。水平滚动到下一个元素以查看效果：

#container > div {
  scroll-padding-right: 30px;
}

亲自试一试

例子 4：吸附位置

要使 scroll-padding-right 属性生效，吸附位置必须设置在子元素的右侧。在此示例中，direction 属性的值 'rtl' 将吸附位置从子元素的右侧更改为左侧。使用这样的代码时，scroll-padding-right 属性将不再起作用：

#container {
  direction: rtl;
  scroll-padding-right: 30px;
}
#container > div {
  scroll-snap-align: none end;
}

亲自试一试

CSS 语法

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

属性值

值 描述
auto 默认值。浏览器计算内边距。
length

Inasababisha ukubadilika wa nafasi ya kina ya kina kwa vifaa vingine kama px, pt, cm na vingine.

Hakuna matumizi ya thamani ya zaidi ya nafasi. Tazama:Matumizi ya kina cha kina cha CSS.
% Inasababisha ukubadilika wa nafasi ya kina ya elementi iliyotumika kwa nafasi ya kina ya kina kikuu kwa kina ya kina chini.
initial Kuingiza tabia hii kwa chaguo cha kuzingatia. Tazama: initial.
inherit Kumtaabisha tabia hii kutoka kwa ukweli wake. Tazama: inherit.

Mafanikio ya vifaa

Chaguo cha kuzingatia: auto
Uwongozi: Hakuna
Harakati ya kichanganyiko: Hakuna matumizi. Tazama:Mafanikio ya harakati.
Safarini: CSS3
Inaingia ya Kiingereza: object.style.scrollPaddingRight="20px"

Matumizi ya kifungu

Mafanikio ya jumla katika tabia hii ni barabara ya kwanza inayosukumwa kwa tabia hii.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Makadirio ya huzuni

Tafadhali tazama:Hisia CSS direction

Tafadhali tazama:Mfano wa CSS scroll-snap-align

Tafadhali tazama:Mfano wa CSS scroll-snap-type

Tafadhali tazama:Mwongozo wa writing-mode wa CSS