CSS scroll-margin-top 属性

scroll-margin-top 属性用于指定滚动容器顶部与其内部内容之间的空白区域（即滚动边界），可用于优化滚动体验。

语法

/* 值为 <length> */
scroll-margin-top: <length>;

/* 值为 <percentage> */
scroll-margin-top: <percentage>;

/* 值为 auto */
scroll-margin-top: auto;

取值

• <length>：指定长度值，如 10px、2rem 等。
• <percentage>：指定相对于容器高度的百分比，如 20%。
• auto：浏览器自动计算滚动边界，与默认值相同。

默认值

auto。

示例

/* 将滚动容器顶部与其内部内容之间的空白区域设置为 20px */
scroll-margin-top: 20px;

/* 将滚动容器顶部与其内部内容之间的空白区域设置为容器高度的 10% */
scroll-margin-top: 10%;

/* 使用默认值 */
scroll-margin-top: auto;

注意事项

• scroll-margin-top 属性只适用于滚动容器，即具有 overflow 属性设置的元素。
• scroll-margin-top 属性与 scroll-padding-top 属性不同，前者设置的是滚动边界（空白区域），后者设置的是内部内容的填充区域。
• scroll-margin-top 属性目前尚未得到所有浏览器的广泛支持，需要谨慎使用。