CSS scroll-padding-right 属性

scroll-padding-right 属性指定容器的滚动内容区域右侧内边距的大小。当容器中的内容被滚动时，内容区域的最右侧将距离滚动条的右侧留出指定的内边距。

语法

scroll-padding-right: <length> | <percentage> | auto;

• <length>：指定一个固定的长度值，比如 px、em 等。
• <percentage>：指定相对于父级元素宽度的百分比。
• auto：如果设置为自动，则会根据元素本身的内边距和宽度自动计算内边距大小。

示例

.container {
  width: 200px;
  height: 300px;
  background-color: #f5f5f5;
  overflow-y: scroll;
  scroll-padding-right: 20px; /* 设置右侧内边距为 20px */
}

.content {
  width: 180px;
  height: 500px;
  background-color: #ddd;
}

<div class="container">
  <div class="content"></div>
</div>

以上示例中，给一个高度为 300px、宽度为 200px 的容器设置了滚动条，并通过 scroll-padding-right 属性将右侧内边距设置为 20px。在容器中放入一个高度为 500px、宽度为 180px 的内容区域，即使内容区域高度大于容器高度，右侧也会自动留出 20px 的内边距，确保内容区域不会与滚动条重叠。

兼容性

scroll-padding-right 属性的兼容性如下表所示：

| Chrome | Firefox | Safari | Opera | Edge | IE | | --- | --- | --- | --- | --- | --- | | 61+ | 63+ | 11.1+ | 48+ | 79+ | 不支持 |

总结

scroll-padding-right 属性可以通过控制内容区域与滚动条之间的内边距，来避免滚动条与内容重叠的问题。虽然该属性在 IE 中不被支持，但它在大多数主流的现代浏览器中都有良好的兼容性。