滚动填充

Avatar of Andy Adams
Andy Adams

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

scroll-paddingCSS 滚动捕捉模块 的一部分。 滚动捕捉是指在窗口(或可滚动容器)滚动时,将视窗位置“锁定”到页面上的特定元素。 想象一下,将一个磁铁放在元素的顶部,它会粘在视窗的顶部,并迫使页面停止滚动到那里。

scroll-padding 是任何滚动捕捉容器的可选属性。 每当 scroll-snap-type 属性设置为除 none 之外的任何值时,就会定义滚动捕捉容器。 有关滚动捕捉容器的更多信息,请参见 scroll-snap-type 年鉴条目

好的,现在继续讨论滚动填充

scroll-padding 用于调整捕捉容器的最佳观看区域。 如果容器具有固定标题等元素,这些元素会遮挡内部元素,或者如果可滚动容器需要一些空间以便内部元素在“捕捉”到位置后有空间呼吸,这将非常有用。

一个简单的例子是使用 scroll-padding 在容器的顶部和左侧创建一些 50px 的固定间距

.scroll-container {
  scroll-padding: 50px 0 0 50px;
}
A diagram with 2 boxes, one is the element container with a pink background and 50 pixels of spacing on the top and the left hand sides of the container. The second box is the element itself in dark gray sitting against the bottom left edge of the container.
粉红色区域显示滚动捕捉容器上的滚动填充。

语法

/* 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-paddingscroll-margin 属性。 使用简写语法以获得最大的浏览器支持。 有关更多详细信息和当前状态,请参阅 chromium 错误跟踪器上的此问题

scroll-padding 接受以下值

  • auto 将让浏览器/用户代理决定填充值。 通常,这意味着值为 0px,但如果用户代理认为其他值更合适,则可以是非零值。
  • <length-percentage> 的写法类似于 padding 和其他属性,其中可以使用单位(pxemvh 等)或作为容器本身的百分比来定义值。

例子

查看 CodePen 上的示例:滚动填充示例
,由 CSS-Tricks (@css-tricks) 创建。

浏览器支持

此浏览器支持数据来自 Caniuse,它提供更多详细信息。 数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
696811*7911

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712711.0-11.2

相关

资源