CSS scroll-margin-left 属性

scroll-margin-left 属性用于设置一个滚动区域的左侧外边距，以便在滚动时防止内容被遮挡而不可见。

语法

/* 默认值 */
scroll-margin-left: auto;

/* 设置具体的值 */
scroll-margin-left: <length> | auto;

默认值 auto 表示元素的左侧外边距为零，会随着滚动而移动。如果指定了具体的长度值，则元素的左侧外边距就是这个长度，不会随着滚动而移动。

适用性

scroll-margin-left 属性适用于可以滚动的元素，如 <div>、<section>、<iframe> 和 <textarea> 等等。此外，只有在元素具有滚动条时，此属性才会起作用。

示例

<div class="scrollable">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  <p>Phasellus egestas turpis quis nisi fringilla fringilla. </p>
  <p>Maecenas elementum enim vel tempor finibus. </p>
  <p>Etiam ullamcorper, quam vel vestibulum tincidunt, massa justo vulputate turpis, at finibus arcu nibh vel nulla. </p>
</div>

.scrollable {
  height: 100px;
  overflow-y: scroll;
  scroll-margin-left: 20px;
}

在上述代码中，我们定义了一个具有滚动条的容器，容器的左侧外边距是 20px，这样在滚动时，内容就不会被左边的外边距遮挡住了。

兼容性

该特性从 Chrome 69、Firefox 68、Safari 12.1、iOS Safari 12.2、Android Chrome 75、Android Firefox 67 开始支持。

总结

scroll-margin-left 属性是一个有用的属性，用于避免滚动元素在滚动时被内容遮挡。如果你的网站需要支持旧版浏览器，建议尝试其他方法，如使用 margin-left 或者在容器内再套一个 <div> 元素，并移动内部元素，以实现相似的效果。