scroll-margin

scroll-margin 是 CSS 滚动捕捉模块 的一部分。滚动捕捉是指当窗口（或可滚动容器）滚动时，视窗位置“锁定”到页面上的特定元素。将滚动捕捉容器想象成在元素顶部放置一块磁铁，该磁铁粘贴到视窗顶部，并强制页面停止滚动到那里。

scroll-margin 是滚动捕捉容器内滚动捕捉元素的可选属性。有关滚动捕捉容器的更多信息，请参见 scroll-snap-type 年鉴条目。

进入滚动边距

scroll-margin 用于调整元素的捕捉区域（定义元素将捕捉到的位置的框）。添加 scroll-margin 在您需要在捕捉到位时为元素提供容器边缘的空间但允许每个元素可能需要稍微不同的间距的情况下很有用。如果所有元素具有相同的间距要求，请考虑在父容器上使用 scroll-padding 而不是 scroll-margin，因为这会影响容器内所有元素的间距。

scroll-margin 允许在元素顶部和左侧留出 50px 间距的简单示例如下所示

.scroll-element {
  scroll-margin: 50px 0 0 50px;
}

语法

/* Shorthand */
scroll-margin: <length>{1,4};

/* Longhands */
scroll-margin-top: <length>;
scroll-margin-right: <length>;
scroll-margin-bottom: <length>;
scroll-margin-left: <length>;

/* inline-specific and block-specific properties as well */
scroll-margin-block: <length>{1,2};
scroll-margin-inline: <length>{1,2};

关于长格式的重要说明： Chrome（和其他浏览器）目前不支持长格式的 scroll-padding 和 scroll-margin 属性。使用简写形式以获得最大的浏览器支持。有关更多详细信息和当前状态，请参见 Chromium 错误追踪器上的此问题。

值

scroll-margin 接受以下长度 <length> 值，该值类似于 margin 和其他属性，其中可以使用单位（px、em、vh 等）来定义值。有关更多信息，请参见 W3C 值和单位模块。根据规范，百分比不能用于 scroll-margin。

示例

请参见 CodePen 上 CSS-Tricks 的 滚动填充示例
(@css-tricks)。

浏览器支持

相关

• scroll-snap-type
• scroll-margin
• scroll-snap-align
• scroll-snap-stop

资源

• CSS 滚动捕捉 W3C 候选推荐
• 实用 CSS 滚动捕捉
• 介绍 CSS 滚动捕捉点