 CSS scroll padding

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.^[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 iswith dimensions $320$ by $160$. The declaration gives the same percentage on each side, not the same absolute number of pixels.^[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.^[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.^[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.