Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS scroll-padding-inline Property

Posted in CSS Tutorial
Updated on Jul 19, 2024
By Mari Selvan
๐Ÿ‘๏ธ 8 - Views
โณ 4 mins
๐Ÿ’ฌ 1 Comment
CSS scroll-padding-inline Property

Photo Credit to CodeToFun

๐Ÿ™‹ Introduction

The scroll-padding-inline property in CSS is used to define the space between the edge of a scroll container and its content when scrolling.

This property is particularly useful for creating a buffer or padding around the content of scrollable elements, enhancing user experience by preventing content from touching the edges of the viewport or container.

๐Ÿ’ก Syntax

The scroll-padding-inline property can be applied to a scroll container and takes one or two values to set the padding on the inline (left and right) directions.

Syntax
Copied
Copy To Clipboard
element {
  scroll-padding-inline: length | percentage;
}

Here, length can be values such as px, em, rem, etc., and percentage represents a percentage of the elementโ€™s width.

๐ŸŽ›๏ธ Default Value

The default value of the scroll-padding-inline property is 0, which means there is no additional padding applied to the inline direction.

๐Ÿ  Property Values

ValueDescription
lengthSpecifies the padding as a fixed length, such as 10px or 2em.
percentageSpecifies the padding as a percentage of the elementโ€™s width, such as 5%.
autoThe default value, which means no padding is applied.

๐Ÿ“„ Example

In this example, weโ€™ll add a scroll padding of 20px to the inline direction of a scroll container.

index.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS scroll-padding-inline Example</title>
  <style>
    .scroll-container {
      width: 300px;
      height: 150px;
      overflow: auto;
      scroll-padding-inline: 20px;
      border: 1px solid #ccc;
    }
    .content {
      width: 600px;
      height: 100%;
    }
  </style>
</head>
<body>
  <h1>Scroll Padding Inline Example</h1>
  <div class="scroll-container">
    <div class="content">
      <!-- Content that overflows -->
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in magna nec magna fringilla aliquet. Sed id suscipit erat. Cras consectetur orci nec libero fermentum, a cursus augue elementum. Suspendisse potenti.
    </div>
  </div>
</body>
</html>

๐Ÿ–ฅ๏ธ Browser Compatibility

The scroll-padding-inline property is supported in modern browsers including Chrome, Firefox, and Safari. For best results, always test your designs across different browsers and devices to ensure consistent behavior.

๐ŸŽ‰ Conclusion

The scroll-padding-inline property is a valuable tool for enhancing the user experience by providing additional space around scrollable content.

By adjusting the padding, you can ensure that important content is visible and not cut off by the edges of the viewport or container, creating a more polished and user-friendly interface.

๐Ÿ‘จโ€๐Ÿ’ป Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
๐Ÿ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy