scroll-padding-inline-start

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

尝试一下

语法

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

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

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

取值

<length-percentage>

滚动口的行首内边距,为有效的长度或百分比。

auto

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

形式定义

初始值auto
适用元素scroll containers
是否是继承属性
Percentagesrelative to the scroll container's scrollport
计算值as specified
动画类型按计算值的类型

形式语法

scroll-padding-inline-start = 
auto |
<length-percentage [0,∞]>

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

规范

Specification
CSS Scroll Snap Module Level 1
# padding-longhands-logical

浏览器兼容性

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-inline-start
auto

Legend

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

Full support
Full support

参见