CSS scroll-padding-inline รายการ

定义和用法

scroll-padding-inline 属性指定在行内方向上，从容器到子元素吸附位置的距离。

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

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

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

注意：此属性仅在行内方向上，scroll-padding-align 属性设置为 'start' 或 'end' 时才有效。

scroll-padding-inline 属性是以下属性的简写属性：

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

scroll-padding-inline 属性的值可以通过不同方式设置：

如果 scroll-padding-inline 属性有两个值：

scroll-padding-inline: 10px 50px;

• 开始处的距离为 10px
• 结束处的距离为 50px

如果 scroll-padding-inline 属性有一个值：

scroll-padding-inline: 10px;

• 开始处和结束处的距离均为 10px

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

CSS 的 scroll-padding-block and scroll-padding-inline 属性与 CSS 属性 CSS scroll-padding-top รายการ、scroll-padding-bottom、scroll-padding-left and scroll-padding-right are very similar, but scroll-padding-block and scroll-padding-inline The attribute depends on the block direction and inline direction.

Instance

Example 1

Set the scroll inner padding on the inline direction, from the container to the snap position to 20px:

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

Try it yourself

Example 2: Image library

In a gallery with snap behavior, you can use scroll-padding-inline The attribute pushes the image out from behind the fixed element:

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

Try it yourself

Example 3

When the container element's writing-mode When the attribute value is set to 'vertical-rl', the starting position of the container and its child elements on the inline direction moves from the left to the top, and the ending position moves from the right to the bottom. This will affect the scroll snap behavior and scroll-padding-inline How the attribute works:

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

Try it yourself

Example 4

When the container element's direction When the attribute value is set to 'rtl', the starting position of the container and its child elements on the inline direction moves from the right to the left. This will affect the scroll snap behavior and scroll-padding-inline How the attribute works:

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

Try it yourself

CSS syntax

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

Property value

Technical details

การสนับสนุนเบราเซอร์

ตัวเลขในตารางนี้แสดงถึงสัปดาห์ที่เซิร์ฟเวอร์แรกที่สนับสนุนคุณสมบัตินี้

เพจที่เกี่ยวข้อง

อ้างอิง：CSS ทิศทาง

อ้างอิง：CSS scroll-snap-align รายการ

อ้างอิง：CSS scroll-snap-type รายการ

อ้างอิง：CSS writing-mode thuộc tính