CSS scroll-padding-block-end Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 23 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The scroll-padding-block-end property in CSS is part of the CSS Scroll Snap Module. It allows web developers to define the padding at the end of the scroll container's block axis, ensuring that content is not too close to the edge when it is scrolled into view.

This property is especially useful for improving the readability and usability of content within scrollable containers.

💡 Syntax

The syntax for the scroll-padding-block-end property is straightforward. It can be applied to any scroll container.

Syntax

Copied

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

🎛️ Default Value

The default value of the scroll-padding-block-end property is auto, which means the user agent determines the padding based on its default settings.

🏠 Property Values

Value	Description
length	Specifies a fixed amount of padding at the end of the block axis (e.g., 10px, 2em).
percentage	Specifies a padding value as a percentage of the scroll container's block dimension (e.g., 10%).
auto	Lets the browser determine the padding automatically.

📄 Example

In this example, we'll set the scroll-padding-block-end to 20px for a scrollable container.

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-block-end Example</title>
  <style>
    .scroll-container {
      height: 200px;
      overflow-y: scroll;
      scroll-padding-block-end: 20px;
      border: 1px solid #ccc;
    }
    .content {
      height: 500px;
      background: linear-gradient(to bottom, #f06, #4a90e2);
    }
  </style>
</head>
<body>
  <h1>Scrollable Container with Custom Scroll Padding</h1>
  <div class="scroll-container">
    <div class="content"></div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The scroll-padding-block-end property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The scroll-padding-block-end property is a valuable addition to the CSS toolkit, providing better control over the scroll behavior and padding of scrollable containers.

By adjusting the padding at the end of the block axis, you can improve the overall user experience, ensuring that content is more readable and visually appealing. Experiment with different values to see how this property can enhance your web designs.