CSS scroll-padding-inline-end 属性

CSS scroll-padding-inline-end 属性用于为容器的内边距提供一个缓冲区，从而在滚动时避免内容被遮盖或紧贴到容器的边缘。

语法

scroll-padding-inline-end: <length> | <percentage> | auto;

• <length>：可以使用绝对单位（px、pt、cm、em等）或相对单位（例如vh、vw、%）来指定缓冲区大小。
• auto：表示使用默认值，即不提供缓冲区。

示例

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

上述示例将为 div 元素的内侧右侧添加 20px 的缓冲区。

浏览器兼容性

CSS scroll-padding-inline-end 属性目前支持 Chrome、Firefox、Safari、Edge、Opera 等主流浏览器，但某些版本需要使用特定前缀。请务必在使用时检查各种浏览器的兼容性。

注意事项

• scroll-padding-inline-end 属性只适用于支持滚动的容器。
• 当滚动容器的方向为左到右时，scroll-padding-inline-end 属性对应的是右侧的缓冲区。
• 在某些情况下，您可能需要为相邻容器的内侧和外侧添加缓冲区。可以使用 scroll-padding 属性来完成任务。
• 当文本方向从右到左时，scroll-padding-inline-end 属性实际上是用于左侧缓冲区的。