scroll-padding-inline-start

Sets the snap padding at the 'start' of the scroll container in the text flow (usually the left side). Keeps snapped items from hugging the left edge.

.product-slider {
  /* Keeps products 40px away from the left edge of the scroller when they snap */
  scroll-padding-inline-start: 40px;
}
Initial value
auto
Inherited
No
Applies to
scrollContainers
Animation type
byComputedValueType

Values

auto
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+
15+
79+
ESC