CSS scroll-margin-right 属性介绍

CSS scroll-margin-right 属性定义了一个元素的右侧滚动条之外的内部元素与视口边缘之间的空间大小。

语法格式

/* 关键字值 */
scroll-margin-right: auto;
scroll-margin-right: 10px;

/* 全球值 */
scroll-margin-right: inherit;
scroll-margin-right: initial;
scroll-margin-right: unset;

属性值

• 关键字值

  • auto：浏览器计算滚动条的位置和相应滚动条宽度和高度决定空间大小。
  • length：指定一个固定的数值，表示该元素的右侧滚动条之外与视口边缘的间距。

• 全局值

  • inherit：表示继承自父元素的该属性值。
  • initial：表示恢复该属性的默认值。
  • unset：表示继承自父元素的该属性值，如果该元素没有父元素，则等同于 initial。

示例代码

/* 关键字值 */
div {
  scroll-margin-right: auto; /* 在滚动条之外留出适当的空间 */
}

div {
  scroll-margin-right: 10px; /* 在滚动条之外留出 10px 的空间 */
}

/* 全局值 */
div {
  scroll-margin-right: inherit; /* 继承父元素的该属性值 */
}

div {
  scroll-margin-right: initial; /* 恢复默认值 */
}

div {
  scroll-margin-right: unset; /* 继承父元素的该属性值，如果该元素没有父元素，则等同于 initial */
}

浏览器兼容性

该属性的浏览器兼容性较差，目前只有 Chrome 和 Firefox 浏览器支持该属性。在使用时可以结合其他属性进行兼容性降级。

参考链接

• MDN Web文档