CSS scroll-padding-left 属性介绍

CSS scroll-padding-left 属性定义在显示滚动条的元素的左侧内边距与视口的距离。该属性对于平滑滚动非常有用，因为它可以使滚动条的位置与内容的开始位置对齐，避免内容在滚动时被部分遮挡。

语法

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

• auto：浏览器自动计算元素的左侧内边距和滚动条之间的距离。
• length：指定元素左侧内边距和滚动条之间的距离，可以使用像素（px）、百分比（%）等单位。
• initial：将属性值设定为默认值。
• inherit：从父元素继承属性值。

示例

基本用法

<div style="width: 200px; height: 150px; overflow: auto; scroll-padding-left: 20px;">
  <p>This is some long content that will be too big to fit in the box without using the scroll bar. If we didn't have scroll-padding-left set, this content might be partially hidden by the scrollbar.</p>
</div>

解释：左侧内边距设置为 20 像素，保证滚动条不会遮盖内容。

使用百分比

<div style="width: 200px; height: 150px; overflow: auto; scroll-padding-left: 10%;">
  <p>This is some long content that will be too big to fit in the box without using the scroll bar. If we didn't have scroll-padding-left set, this content might be partially hidden by the scrollbar.</p>
</div>

解释：左侧内边距设置为宽度的 10%，保证滚动条不会遮盖内容。

浏览器兼容性

CSS scroll-padding-left 属性目前还处于草案阶段，可能不被所有现代浏览器支持。您可以在需要使用时检查浏览器是否支持该属性，并提供替代方案。