CSS滚动边距属性

CSS滚动边距属性（scroll-margin）可以用来设置滚动容器边缘和内部滚动内容之间的空间。它可以在垂直和水平方向上设置边距，以调整滚动行为和外观。

语法

/* 设置纵向滚动边距 */
scroll-margin: <length> <length>?;

/* 设置横向滚动边距 */
scroll-margin-inline: <length> <length>?;

/* 设置块级元素内部的横向滚动边距 */
scroll-margin-block: <length> <length>?;

属性值

• <length>：指定长度值，可以是正数、负数、百分比；
• <length>?：可选的长度值，表示可以只设置一个值，也可以设置两个值，如果只设置一个值，另一个值将默认为auto。

示例

下面是一个基本的示例，演示如何使用scroll-margin属性来调整滚动容器边缘和内部滚动内容之间的空间：

.scroll-container {
  overflow-y: scroll; /* 垂直滚动条 */
  height: 200px; /* 设置容器高度 */
  scroll-margin: 20px; /* 设置纵向滚动边距为20像素 */
}

如果需要分别设置纵向和横向滚动边距，可以使用scroll-margin-inline和scroll-margin-block属性：

.scroll-container {
  overflow: scroll; /* 同时启用纵向和横向滚动条 */
  width: 500px; /* 设置容器宽度 */
  height: 200px; /* 设置容器高度 */
  scroll-margin-inline: 20px 10px; /* 设置横向滚动边距为20像素，左右两侧分别为10像素 */
  scroll-margin-block: 30px; /* 设置纵向滚动边距为30像素 */
}

兼容性

CSS滚动边距属性的兼容性请参考 Can I Use。

总结

CSS滚动边距属性可以帮助开发者很方便的调整滚动容器边缘和内部滚动内容之间的空间。它的使用相对简单，但要注意兼容性问题。