= CSS scroll padding
{c}
<CSS scroll padding> defines inward offsets from a <CSS scrollport> to establish an optimal viewing region. In a snap container that region is the <CSS snapport>, used to align <CSS scroll snap areas>. The `scroll-padding` shorthand sets its sides, while individual longhands can control one side.<CSS Scroll Snap Module Level 1 by World Wide Web Consortium>[§4.2, scroll-padding and optimal viewing region]{ref}
For an own example, take a $400$-by-$200$ <CSS pixel> scrollport and set `scroll-padding: 10%;`. Percentages resolve against the corresponding scrollport dimension: left and right are $40$ pixels each, top and bottom $20$ each. In physical coordinates the optimal region is
$$
[40,360]\times[20,180],
$$
with dimensions $320$ by $160$. The declaration gives the same percentage on each side, not the same absolute number of pixels.<CSS Scroll Snap Module Level 1 by World Wide Web Consortium>[§4.2, percentages and inward offsets]{ref}
An explicit `scroll-padding-top: 50px` can reserve room in the preferred viewing region when an overlay obscures the top of a scrolling panel. This does not itself create the overlay or change the content's normal layout. It tells scrolling operations where a useful visible alignment should lie.
The initial value `auto` leaves the offset to the user agent. The pinned specification says it should generally resolve to zero, while allowing heuristics that choose a nonzero value in appropriate cases. Code that needs the example's explicit geometry should therefore state its offsets instead of silently treating every automatic value as zero.<CSS Scroll Snap Module Level 1 by World Wide Web Consortium>[§4.2, auto and heuristic example]{ref}
These offsets do not clip the excluded strip, resize the scrollport, change the <CSS scroll origin> or redefine the <CSS initial scroll position>. They affect the optimal region for operations such as targeting, focusing and paging; the property applies to scroll containers even when they are not snap containers.<CSS Scroll Snap Module Level 1 by World Wide Web Consortium>[§4.2, applicability and effects on scrolling versus layout/visibility]{ref}
<CSS scroll margin> describes outsets on the target side, whereas <CSS scroll padding> describes insets on the container side. Using both requires aligning the resulting two regions rather than adding ordinary box-model padding to the element and assuming it has the same effect.
Back to article page
