Sometimes you’ll want to ensure that your content isn’t obscured by a fixed or absolutely positioned element. For instance, you may have controls that are positioned at the bottom of the container, as shown in the image below, which depicts a Scroll Snap container with scrolling controls for the container. The controls are absolutely positioned, within an element that contains both the Scroll Snap container and buttons.
This is when the scroLL-padding property comes in handy. As the specification explains, the scroLL-padding property defines the optimal viewing region of a scrollport. It adds space within the scrolling container, but doesn’t change its dimensions. This is true even if the computed value of its box-sizing property is border-box .
Let’s look at an example. We’ll use markup from earlier in this section, and add additional elements for our controls:
<div class=”slideshow”>
<p class=”controls”>
<button type=”button” data-direction=”back”>Up</button>
<button type=”button” data-direction=”forward“>Down</button>
</p>
<div class=”scroll-container”>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>
<p>F</p>
<p>G</p>
<p>H</p>
</div>
</div>
Let’s pair the above markup with the CSS shown below:
.slideshow {
position: relative;
}
.controls {
position: absolute;
bottom: 0;
z-index: 1;
display: flex;
gap: 2rem;
justify-content: center;
width: 100%;
}
.scroll-container {
width: 70vw;
height: 50vh;
margin: auto;
overflow-y: auto;
scroll-snap-type: block mandatory;
}
.scroll-container p {
margin: 0;
height: 80%;
scroll-snap-align: end none;
}
This gives us the layout we saw pictured at the beginning of this section. Without scrollpadding , each child element gets partially obscured by the controls at the end of each scrolling operation. You can see this in the image below.
Let’s add a scroll-padding declaration to our scroll container:
.scroll-container {
width: 70vw;
height: 50vh;
margin: auto;
overflow-y: auto;
scroll-snap-type: block mandatory;
/* Total height of the control container and its vertical margin */
scroll-padding: 0 0 68px;
}
Now at the end of each scrolling operation, the end of the child element aligns with the edge of the Scroll Snap container, plus 68 pixels.
As you may have gathered from its syntax, scroLL-padding is a shorthand property for physical longhand properties. Values follow the same order and syntax as margin or padding : top, right, bottom, left. You can use lengths or percentages for values, but negative values are invalid.
If you only want to set padding along a single edge, use physical properties instead. The physical longhand scroLL-padding properties are as follows:
- scroLL-padding-top
- scroLL-padding-right
- scroLL-padding-bottom
- scroLL-padding-Left
For padding that adjusts with the writing mode, use flow-logical longhand properties:
- scroLL-padding-inLine-start
- scroLL-padding-bLock-start
- scroLL-padding-inLine-end
- scroLL-padding-bLock-end
Like other logical properties, which edge these properties affect depends on the document’s writing mode. In languages written horizontally from left to right, scroLL-padding-inLine- start is the left edge of the container and scroLL-padding-bLock-start is its top edge. For horizontal, right-to-left languages, scroLL-padding-inLine-start is the right edge. For vertical, right-to-left languages, scroLL-padding-bLock-start is the right edge. For vertical, left-to-right languages, it’s the left.
Using scroLL-padding only affects a scrolling axis when there’s something to scroll. Adding left or right scroll padding has no effect when using scroLL-snap-type: y . Similarly, scroLLpadding-top makes no difference when the scroll direction is horizontal.
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.