scroll-padding

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

简写属性 scroll-padding 同时设置元素的所有滚动内边距,其赋值方式较为类似 padding 属性为元素内边距赋值的方式。

尝试一下

scroll-padding-* 属性定义了滚动口的最优视区——用于在用户视野中放置内容的目标区域——的内边距。作者由此得以排除滚动口被其他内容(如固定定位的工具栏或侧边栏)所遮挡的区域,或在目标元素与滚动口的边之间留出更多余地。

属性构成

此属性为下列 CSS 属性的简写属性:

语法

css
/* 关键字值 */
scroll-padding: auto;

/* <length> 值 */
scroll-padding: 10px;
scroll-padding: 1em 0.5em 1em 1em;
scroll-padding: 10%;

/* 全局值 */
scroll-padding: inherit;
scroll-padding: initial;
scroll-padding: revert;
scroll-padding: revert-layer;
scroll-padding: unset;

取值

<length-percentage>

滚动口对应边的内边距,为有效的长度(<length>)或百分比(<percentage>)。

auto

此内边距由用户代理所决定。此值通常为 0px,但用户代理可检测非零值是否更合理并另行处理。

形式定义

初始值该简写所对应的每个属性:
适用元素scroll containers
是否是继承属性
Percentagesrelative to the scroll container's scrollport
计算值该简写所对应的每个属性:
动画类型按计算值的类型

形式语法

scroll-padding = 
[ auto | <length-percentage [0,∞]> ]{1,4}

<length-percentage> =
<length> |
<percentage>

规范

Specification
CSS Scroll Snap Module Level 1
# scroll-padding

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scroll-padding
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

参见