ویژگی scroll-padding-right CSS

تعریف و استفاده

scroll-padding-right ویژگی تعیین می‌کند که فاصله از سمت راست قالب تا موقعیت جذب فرزند چقدر است.

موقعیت جذب به موقعیت جذب فرزند در داخل قالب در زمان توقف اسکرول اشاره دارد.

موقعیت جذب توسط scroll-snap-align تنظیمات ویژگی، اما ممکن است تحت تأثیر ویژگی‌های CSS قرار گیرد direction 和 writing-mode تأثير.

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

要看到 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;

属性值

技术细节

浏览器支持

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

صفحات مرتبط

مراجعه:ویژگی direction CSS

مراجعه:ویژگی scroll-snap-align CSS

مراجعه:ویژگی scroll-snap-type CSS

مراجعه:ویژگی writing-mode CSS