CSS scroll-padding-inline-end Property

Description

The scroll-padding-inline-end CSS property is used to define the amount of padding space that should be reserved at the end of an inline axis (e.g., horizontal axis) when scrolling within an element. It ensures that content doesn't get too close to the edge of the scrollable container, preventing it from being partially hidden by the scrollbars. By specifying a value for this property, web developers can control the spacing between the content and the container's inline end, improving the user experience when navigating through scrollable content areas.

Initial value
auto
Applies to
scroll containers
Inherited
no
Computed value
as specified
Animatable
by computed value type
JavaScript syntax
object.style.scrollPaddingInlineEnd

Interactive Demo

1
2
3
Scroll »

Syntax

scroll-padding-inline-end: auto | &tl;length-percentage [0,∞]>

Values

  • autoThe offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.
  • &tl;length-percentage>An inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage.

Example

<div id="container">
<div class="blue"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
#container {
  width: 60%;
  aspect-ratio: 3/2;
  margin: auto;
  border: solid black 2px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-end: 20px;
}

.blue {
  background-color: lightblue;
  height: 95%;
  aspect-ratio: 5/3;
}

.green {
  background-color: lightgreen;
  height: 80%;
  aspect-ratio: 5/4;
}

.blue, .green {
  display: inline-block;
  margin: 2px;
  scroll-snap-align: none end;
}

Browser Support

The following table will show you the current browser support for the CSS scroll-padding-inline-end property.

Desktop
Edge Chrome Firefox Opera Safari
7969685615
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
696848151069

Last updated by CSSPortal on: 3rd January 2024