Tillitsdone
down Scroll to discover
Enhance Scrolling with CSS scroll-padding-right
Learn how to use CSS scroll-padding-right to control right-side padding in scroll containers.

Explore keyword, length, and percentage values for better scrolling experiences.
thumbnail

Introduction

The scroll-padding-right property in CSS helps you control the right-side padding within a scroll container. It ensures elements remain visible even if other content like fixed-position toolbars or sidebars partially obscure the scroll area. This property makes scrolling experiences more user-friendly and visually appealing.

Browser Compatibility

The scroll-padding-right property is widely supported across popular browsers:

  • Google Chrome: Since version 69.
  • Mozilla Firefox: Since version 68.
  • Microsoft Edge: Since version 79.
  • Opera: Since version 56.
  • Safari: Since version 14.1.

Syntax

The scroll-padding-right property can be set using keyword values, length values, or global values. Here’s the basic syntax:

/* Keyword values */
scroll-padding-right: auto;
/* <length> values */
scroll-padding-right: 10px;
scroll-padding-right: 1em;
scroll-padding-right: 10%;
/* Global values */
scroll-padding-right: inherit;
scroll-padding-right: initial;
scroll-padding-right: revert;
scroll-padding-right: revert-layer;
scroll-padding-right: unset;

Keyword Values

  • auto: The user agent determines the offset, generally 0px.

Length Values

  • <length>: Specifies the padding in fixed units like pixels (px), ems (em), or percentages (%).

Global Values

  • inherit: Inherits the value from the parent element.
  • initial: Sets the property to its default value.
  • revert: Reverts the property to the browser’s default.
  • revert-layer: Reverts the property to the value established by the user agent for a specific layer.
  • unset: Resets the property to its natural value.

Values

The scroll-padding-right property can take various values to customize the scrolling experience.

Length-Percentage Values

  • <length>: Use fixed units like pixels (px), ems (em), or rems (rem). For example, scroll-padding-right: 10px;.
  • <percentage>: Use percentages relative to the scroll container’s width. For example, scroll-padding-right: 10%;.

Auto

  • auto: Lets the user agent determine the appropriate offset, usually 0px.

Global Values

  • inherit: Inherits the value from the parent element.
  • initial: Sets the property to its default value.
  • revert: Reverts the property to the browser’s default.
  • revert-layer: Reverts the property to the value established by the user agent for a specific layer.
  • unset: Resets the property to its natural value.

Formal Syntax

The formal syntax of the scroll-padding-right property defines the structure and acceptable values:

scroll-padding-right =
auto /* User agent determines the offset */
<length-percentage [0,]> /* Fixed units or percentages */
<length-percentage> =
<length> /* Fixed units like px, em, rem */
<percentage> /* Percentage relative to the scroll container */

Example

/* Using a fixed length value */
scroll-padding-right: 20px;
/* Using a percentage value */
scroll-padding-right: 10%;
/* Using the auto keyword */
scroll-padding-right: auto;

Specifications

The scroll-padding-right property is part of the CSS Scroll Snap Module Level 1 specifications. This module standardizes scroll snapping behavior, ensuring consistency across different browsers and devices.

Key Points of the Specification

  • Scroll Snap Points: Defines specific locations within the scroll container where content will “snap” to when scrolling stops.
  • Scroll Padding: Properties like scroll-padding-right define padding around these snap points, ensuring elements are properly aligned and visible.
  • Compatibility: Aims to provide a unified approach to scroll snapping.

Example Usage

.scroll-container {
scroll-snap-type: x mandatory;
scroll-padding-right: 20px;
}
.scroll-item {
scroll-snap-align: start;
}

In this example, the scroll-container enables mandatory horizontal scroll snapping, and the scroll-padding-right property adds 20 pixels of padding to the right side. The scroll-item elements will snap to the start of the scroll container, providing a controlled scrolling experience.

Example

Here’s a practical example demonstrating how to use scroll-padding-right.

HTML

<!DOCTYPE html>
<html>
<head>
<style>
.scroll-container {
width: 300px;
height: 300px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-type: x mandatory;
scroll-padding-right: 90px;
border: 2px solid black;
}
.scroll-item {
width: 300px;
height: 275px;
display: inline-block;
scroll-snap-align: start;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="scroll-container">
<div class="scroll-item" style="background-color: lightblue;">Item 1</div>
<div class="scroll-item" style="background-color: lightgreen;">Item 2</div>
<div class="scroll-item" style="background-color: lightcoral;">Item 3</div>
<div class="scroll-item" style="background-color: lightgoldenrodyellow;">Item 4</div>
</div>
</body>
</html>

Explanation

  • .scroll-container: Defines the scroll container with a fixed width and height, enabling horizontal scrolling and disabling vertical scrolling. The scroll-snap-type property forces the container to snap to the start of each scroll-item.
  • scroll-padding-right: 90px;: Adds 90 pixels of padding to the right side of the scroll container, ensuring the last item remains visible.
  • .scroll-item: Each item has a fixed width and height and snaps to the start of the scroll container when scrolling.

Output

When you scroll through the container, the items snap to the start, and the 90-pixel padding on the right keeps the last item visible. This creates a controlled and visually appealing scrolling experience.

Supported Browsers

The scroll-padding-right property is supported in the following browsers:

  • Chrome: Version 69 and later
  • Firefox: Version 68 and later
  • Edge: Version 79 and later
  • Opera: Version 56 and later
  • Safari: Version 14.1 and later

By using this property, you can enhance the scrolling experience in your web projects, ensuring elements remain visible and properly aligned.

Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.