CSS scroll-padding-inline 属性

scroll-padding-inline 属性是一个相对新的 CSS 属性，用于控制元素滚动条周围的内边距（padding）。

在许多情况下，当元素内存在滚动条时，滚动条会覆盖元素内部的内容。为了避免这种情况，可以使用 scroll-padding-inline 属性为元素添加一个内边距，使内容不会被覆盖。

下面是一些具体的用例：

用法

scroll-padding-inline 属性可以采用如下语法：

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

属性值

• auto: 默认值。该元素将自动计算适当的内边距，以防止内容与滚动条重叠。
• length: 指定元素周围的内边距（padding）。可以使用任何 CSS 长度单位，例如 px、em 或 rem。
• initial: 设置属性为默认值。
• inherit: 从父元素继承该属性值。

例子

以下是一些示例，其中说明了如何使用 scroll-padding-inline 属性来避免内容与滚动条之间的重叠。

用户定义 scroll-padding-inline 属性

.container {
  scroll-padding-inline: 50px;
}

在这个例子中，.container 元素会增加 50 像素的内边距，以便内容不与滚动条重叠。

自动计算 scroll-padding-inline 属性

ul {
  overflow: auto;
  scroll-padding-inline: auto;
}

这个例子中，ul 元素使用 scroll-padding-inline 的默认值 auto，系统会自动计算适当的内边距，以避免内容与滚动条重叠。

备注

目前，scroll-padding-inline 属性的兼容性情况较为有限。不过，随着更多的浏览器支持该属性，scroll-padding-inline 将成为 Web 开发人员的重要工具之一。