DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
scroll-padding
是 CSS 滚动捕捉模块 的一部分。 滚动捕捉是指在窗口(或可滚动容器)滚动时,将视窗位置“锁定”到页面上的特定元素。 想象一下,将一个磁铁放在元素的顶部,它会粘在视窗的顶部,并迫使页面停止滚动到那里。
scroll-padding
是任何滚动捕捉容器的可选属性。 每当 scroll-snap-type
属性设置为除 none
之外的任何值时,就会定义滚动捕捉容器。 有关滚动捕捉容器的更多信息,请参见 scroll-snap-type
年鉴条目。
好的,现在继续讨论滚动填充
scroll-padding
用于调整捕捉容器的最佳观看区域。 如果容器具有固定标题等元素,这些元素会遮挡内部元素,或者如果可滚动容器需要一些空间以便内部元素在“捕捉”到位置后有空间呼吸,这将非常有用。
一个简单的例子是使用 scroll-padding
在容器的顶部和左侧创建一些 50px
的固定间距
.scroll-container {
scroll-padding: 50px 0 0 50px;
}

语法
/* Shorthand */
scroll-padding: [ <length-percentage> | auto ]{1,4};
/* Longhands */
scroll-padding-top: <length-percentage> | auto;
scroll-padding-right: <length-percentage> | auto;
scroll-padding-bottom: <length-percentage> | auto;
scroll-padding-left: <length-percentage> | auto;
/* inline-specific and block-specific properties as well */
scroll-padding-block: [ <length-percentage> | auto ]{1,2};
scroll-padding-inline: [ <length-percentage> | auto ]{1,2};
关于完整语法的重要说明: Chrome 目前不支持完整语法的 scroll-padding
和 scroll-margin
属性。 使用简写语法以获得最大的浏览器支持。 有关更多详细信息和当前状态,请参阅 chromium 错误跟踪器上的此问题。
值
scroll-padding
接受以下值
auto
将让浏览器/用户代理决定填充值。 通常,这意味着值为 0px,但如果用户代理认为其他值更合适,则可以是非零值。<length-percentage>
的写法类似于padding
和其他属性,其中可以使用单位(px
、em
、vh
等)或作为容器本身的百分比来定义值。
例子
查看 CodePen 上的示例:滚动填充示例
,由 CSS-Tricks (@css-tricks) 创建。
浏览器支持
此浏览器支持数据来自 Caniuse,它提供更多详细信息。 数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
69 | 68 | 11* | 79 | 11 |
移动设备/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 11.0-11.2 |