scroll-padding-inline-end
Overview
The scroll-padding-inline-end
property is used to establish the scroll padding offsets for the end edge in the inline direction of the scrollport, which is the currently visible portion of the scroll container that the user sees, allowing adjustments to the placement of content within the scrollport. Notably, the scroll-padding
properties have an impact on the behavior of scroll snap containers when offsets are set to assist in aligning scroll positions at snap points.
Note:
scroll-padding-inline-end
, along withscroll-padding-inline-start
, is part of the shorthandscroll-padding-inline
property.
Examples and Usage
In the example below, we use scroll-padding-inline-end
within a scroll snap container setting. We construct a scroll container with several items nested within, illustrating the property's influence on the scroll padding for the inline-end edge and its interaction with scroll snap points.
HTML Structure
<div class="scroll-container">
<div class="scroll-item item-1"><span>1</span></div>
<div class="scroll-item item-2"><span>2</span></div>
<div class="scroll-item item-3"><span>3</span></div>
<div class="scroll-item item-4"><span>4</span></div>
</div>
CSS Styling
/* The scroll container with a fixed size and scroll snap behavior */
.scroll-container {
width: 300px;
height: 300px;
border: 2px solid black;
/* Enabling horizontal scrolling */
overflow-x: scroll;
/* Disabling vertical scrolling */
overflow-y: hidden;
/* Implementing horizontal scrolling with mandatory snap points */
scroll-snap-type: x mandatory;
/* Setting a 20px scroll padding at the inline-end edge */
scroll-padding-inline-end: 20px;
/* Ensuring contained items are in one line */
white-space: nowrap;
}
/* Styling and alignment of the scroll items */
.scroll-item {
width: 300px;
height: 300px;
/* Aligns elements to the end edge on scroll snap.
Here, 'none' is used for the block dimension
and 'end' for the inline dimension */
scroll-snap-align: none end;
/* Arranging the items horizontally */
display: inline-block;
}
/* Stylize the numbers within each item */
.scroll-item span {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
color: black;
font-family: "UI Monospace", monospace;
}
/* Applying differing background colors for odd and even items */
.item-1,
.item-3 {
background-color: orange;
}
.item-2,
.item-4 {
background-color: lightblue;
}
In this configuration, scroll-padding-inline-end: 20px
is applied to the .scroll-container
. This establishes a padding of 20 pixels from the inline-end edge each time a scroll item comes into the viewport.
The scrolling mechanism here is solely horizontal, as defined by overflow-y: hidden
and overflow-x: scroll
. We further implement scroll snapping with scroll-snap-type: x mandatory
, thereby enabling the scroll to halt at distinct snap points.
The property scroll-snap-align: none end
guides the browser to align the snap points with the end edge of each .scroll-item
. Since the scrolling in this scenario is exclusively horizontal, it's equivalent to simply declaring scroll-snap-align: end
. The 'none end' format gains its significance when handling scroll containers that support both vertical and horizontal scrolling, as it offers precise control over scroll snapping behavior for each dimension.
All .scroll-item
elements mirror the .scroll-container
in terms of width and height, and are horizontally arranged via display: inline-block
. The alternating background colors for odd and even items heighten the visual distinction.
Although not explicitly set in this example, writing-mode
takes the default value horizontal-tb
. In this case, lines of text progress from top to bottom, and the flow of text extends from left to right. Consequently, in this setup, the 'inline-end' direction is synonymous with the right edge of the scrollport.
Values
The scroll-padding-inline-end
property accepts the following values:
Value | Description |
---|---|
auto | The user agent(browser) determines the offset. Typically, this is 0px , but the user agent may select a non-zero value if deemed more suitable. |
<length-percentage> | Sets an inward offset from the inline end edge of the scrollport, which can be expressed in valid length units (px, em, vh, etc.), or as a percentage. |
Associated Properties
scroll-padding-inline
scroll-padding-inline-start
scroll-padding-block
scroll-padding
scroll-margin
scroll-margin-inline
scroll-margin-block
Tips and Tricks
The
scroll-padding-inline-end
property could ensure that interactive elements within your scroll container, like navigation icons or overlaid controls, do not obscure underlying content.scroll-padding-inline-end
, like other flow-relative, scroll-padding properties, adapts according to thewriting-mode
. In a horizontal top-to-bottom writing mode (writing-mode: horizontal-tb
), 'inline-end' refers to the right edge of the scrollport. In vertical right-to-left (writing-mode: vertical-rl
) and vertical left-to-right (writing-mode: vertical-lr
) writing modes, 'inline-end' refers to the bottom and top edge of the scrollport, respectively.Keep in mind that negative values are invalid for
scroll-padding
properties.
Browser Compatibility
For a more detailed breakdown, refer to the first link in the Useful Resources below.
Browser | Chrome | Edge | Safari | Firefox | Opera | Internet Explorer |
---|---|---|---|---|---|---|
Support | Yes* | Yes* | Yes* | Yes* | Yes* | No |
Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.
Useful Resources
Can I use: scroll-padding-inline-end
W3C's Editor's Draft of CSS Scroll Snap Module Level 1: Flow-relative Longhands for scroll-padding