CSS scroll-padding-inline-end Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 12 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The scroll-padding-inline-end property in CSS is used to control the padding space on the end side of the inline dimension (right side in left-to-right text direction) of the viewport when scrolling.

This property helps ensure that the element being scrolled into view has adequate space from the edge of the viewport, providing a better user experience.

💡 Syntax

The syntax for the scroll-padding-inline-end property is as follows:

Syntax

Copied

element {
  scroll-padding-inline-end: length | percentage | auto;
}

🎛️ Default Value

The default value of the scroll-padding-inline-end property is auto, meaning the browser applies default padding.

🏠 Property Values

Value	Description
length	A fixed length value (e.g., 10px, 2em). This sets a specific amount of space on the inline end side of the viewport.
percentage	A percentage value relative to the viewport’s width.
auto	The default setting, which lets the browser handle the padding based on its default behavior.

📄 Example

In this example, we'll apply a fixed padding of 20px to the end of the inline dimension when scrolling to an element.

index.html

Copied

<!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-end Example</title>
  <style>
    .container {
      height: 200px;
      overflow-x: scroll;
      scroll-padding-inline-end: 20px;
    }
    .content {
      width: 1000px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <h1>Scroll Padding Inline End Example</h1>
  <div class="container">
    <div class="content">
      Scroll me and notice the padding on the end side.
    </div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The scroll-padding-inline-end property is supported in modern browsers. For older browsers or specific versions, compatibility might vary. It’s recommended to test your design across different browsers to ensure consistent behavior.

🎉 Conclusion

The scroll-padding-inline-end property is useful for controlling the space around the edges of elements when scrolling.

By customizing the padding, you can enhance the user experience by ensuring that important content isn't obscured by the edges of the viewport. Experiment with different values to see how this property can improve your site's scroll behavior and layout.