The scroll-padding-inline
shorthand property sets the scroll padding of an element in the inline dimension.
The scroll-padding properties define offsets for the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport.
This property is a shorthand for the following CSS properties:
/* Keyword values */ scroll-padding-inline: auto; /* <length> values */ scroll-padding-inline: 10px; scroll-padding-inline: 1em .5em; scroll-padding-inline: 10%; /* Global values */ scroll-padding-inline: inherit; scroll-padding-inline: initial; scroll-padding-inline: unset;
<length-percentage>
auto
Initial value | auto |
---|---|
Applies to | scroll containers |
Inherited | no |
Percentages | relative to the scroll container's scrollport |
Computed value | as specified |
Animation type | by computed value type |
[ auto | <length-percentage> ]{1,2}where
<length-percentage> = <length> | <percentage>
Specification | Status | Comment |
---|---|---|
CSS Scroll Snap Module Level 1 The definition of 'scroll-padding-inline' in that specification. | Candidate Recommendation | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
scroll-padding-inline |
69 | 79 | 68 | No | 56 | No |
Mobile | ||||||
---|---|---|---|---|---|---|
scroll-padding-inline |
69 | 69 | 68 | 48 | No | 10.0 |
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline