scroll-padding-bottom
Sets the snap padding at the bottom of the scroll container. It essentially creates a 'safe zone' at the bottom of the scroller so that snapped items don't hit the very edge.
Quick example
.vertical-carousel {
/* Keeps a 50px gap at the bottom of the scroller when items snap to the bottom */
scroll-padding-bottom: 50px;
}Quick facts
Initial value
autoInherited
No
Applies to
scroll containers
Animation type
byComputedValueType
Values
auto scroll-padding-bottom Browser Support
Widely available Since 2020 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
Safe to use without fallbacks.
69+
68+
14.1+
79+