Tillitsdone
down Scroll to discover
CSS scroll-padding-inline-start Optimize Scroll Containers
The CSS scroll-padding-inline-start property defines the offset for the start edge in the inline dimension of a scroll container.

It helps exclude regions obscured by fixed elements and adds space between content and edges.

Supports auto, length, percentage, and global values.
thumbnail

Introduction

The scroll-padding-inline-start CSS property sets the padding at the start of the scrollable area. This helps ensure important content stays visible and adds space between the content and the scroll container’s edges. It’s useful for improving user experience, especially when dealing with fixed elements like toolbars.

Specification

The scroll-padding-inline-start property is part of the CSS Scroll Snap Module Level 1, which controls scrolling behavior.

For more details, check out the official specification:

Description

The scroll-padding-inline-start property sets the padding at the start of the scrollable area. This helps ensure important content stays visible and adds space between the content and the scroll container’s edges.

You can use various values like auto, length values (e.g., pixels, em units), percentages, and global values (e.g., inherit, initial, revert).

Syntax

Here’s how to use the scroll-padding-inline-start property in your CSS:

/* Keyword value */
scroll-padding-inline-start: auto;
/* Length values */
scroll-padding-inline-start: 10px;
scroll-padding-inline-start: 1em;
scroll-padding-inline-start: 10%;
/* Global values */
scroll-padding-inline-start: inherit;
scroll-padding-inline-start: initial;
scroll-padding-inline-start: revert;
scroll-padding-inline-start: revert-layer;
scroll-padding-inline-start: unset;

Values

You can use several types of values:

  • <length-percentage>: Sets an inwards offset from the start edge. This can be a length (e.g., 10px) or a percentage (e.g., 10%).
  • auto: The offset is determined by the browser, usually 0px.
  • Global values: Includes inherit, initial, revert, revert-layer, and unset.

Formal Definition

The scroll-padding-inline-start property defines the padding at the start of the scrollable area.

  • Initial value: auto
  • Applies to: Scroll containers
  • Inherited: No
  • Percentages: Relative to the scroll container’s scrollport
  • Computed value: As specified
  • Animation type: By computed value type

Browser Compatibility

The scroll-padding-inline-start property is widely supported across major browsers:

  • Firefox: Supported since version 68.
  • Chrome: Supported since version 69.
  • Edge: Supported since version 79.
  • Opera: Supported since version 56.
  • Safari: Supported since version 15.

Example

Here’s an example to illustrate how the scroll-padding-inline-start property works:

HTML

<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
width: 270px;
height: 300px;
scroll-snap-align: none start;
}
.Website {
width: 300px;
height: 300px;
border: 2px solid green;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-type: x mandatory;
scroll-padding-inline-start: 90px; /* Adding padding at the start edge */
}
</style>
</head>
<body>
<div class="Website">
<img src="WebsiteUrl" class="geeks">
<img src="WebsiteUrl" class="geeks">
<img src="WebsiteUrl" class="geeks">
<img src="WebsiteUrl" class="geeks">
<img src="WebsiteUrl" class="geeks">
<img src="WebsiteUrl" class="geeks">
</div>
</body>
</html>

Explanation

In this example:

  1. The .Website container has horizontal scrolling enabled and vertical scrolling disabled.
  2. The scroll-snap-type property is set to x mandatory, making the container snap to the nearest scroll snap position along the x-axis.
  3. The scroll-padding-inline-start property is set to 90px, adding 90 pixels of padding at the start edge of the scroll container.
  4. Inside the .Website container, there are several images with the class .geeks, each styled with specific width and height.

When you scroll through the images in the .Website container, you’ll see a 90-pixel padding at the start edge, thanks to the scroll-padding-inline-start property. This padding ensures the first image has some breathing room, enhancing the visual experience.

Supported Browsers

The scroll-padding-inline-start property is supported across modern browsers:

  • Firefox: Supported since version 68.
  • Chrome: Supported since version 69.
  • Edge: Supported since version 79.
  • Opera: Supported since version 56.
  • Safari: Supported since version 15.

Using the scroll-padding-inline-start property, web developers can create more user-friendly and visually appealing interfaces, ensuring important content stays visible across different browsers and devices.

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.