Explore keyword, length, and percentage values for better scrolling experiences.
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
auto
: The user agent determines the offset, generally0px
.
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:
Example
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
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
Explanation
.scroll-container
: Defines the scroll container with a fixed width and height, enabling horizontal scrolling and disabling vertical scrolling. Thescroll-snap-type
property forces the container to snap to the start of eachscroll-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.
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.