CSS scroll-padding-bottom
The scroll-padding-bottom property sets padding at the bottom edge of a scroll container for scroll snapping and programmatic scrolling.
Syntax
scroll-padding-bottom: 0;
scroll-padding-bottom: 4rem;Example
html {
scroll-padding-bottom: 5rem;
}This can be useful when fixed interface elements near the bottom would otherwise cover the target after navigation or scripted scrolling.
When it helps
Use it when anchor links, focus jumps or scroll snap points land too close to the bottom edge of a container. It is a scroll-positioning tool, not visual decoration.
If an element is hidden by a sticky footer or bottom action bar after scrolling, scroll-padding-bottom is often the cleaner fix.
Scroll padding vs padding
Normal padding-bottom affects layout. scroll-padding-bottom affects where scroll targets settle. They solve different problems.