CSS scroll-margin-inline 属性介绍

CSS scroll-margin-inline 属性用于设置内联方向（水平方向）滚动条和元素边缘的最小距离。

语法

/* 关键字值 */
scroll-margin-inline: auto;
scroll-margin-inline: <length>;
scroll-margin-inline: initial;
scroll-margin-inline: inherit;

/* 全局值 */
scroll-margin-inline: unset;

属性值

| 值 | 描述 | | :-------- | :----------------------------------------------------------- | | auto | 规定浏览器应该计算一个适当的滚动边距。 | | | 定义内联方向滚动条和元素边缘之间的最小距离。可用像素、em和rem等单位，也可用负值 | | initial | 设置该属性为它的默认值。 | | inherit | 从父元素继承该属性。 | | unset | 重置该属性为它的自然值。 |

示例

.container {
  width: 300px;
  height: 150px;
  border: 1px solid black;
  overflow-x: auto; /* 添加水平方向滚动条 */
  scroll-margin-inline: 20px; /* 设置水平方向滚动条与容器边缘的最小距离 */
}

浏览器兼容性

scroll-margin-inline 属性在如下浏览器中得到支持：

• Chrome
• Firefox
• Safari
• Edge
• Opera

参考链接

• MDN Web 文档