CSS scroll-padding Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 13 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The scroll-padding property in CSS is used to define the offset around the edges of a scroll container where the browser will stop scrolling when a user performs a scroll snap.

This property helps in controlling the positioning of the content when using scroll snapping, ensuring that the desired elements are fully visible and not obscured by other UI elements like headers or footers.

💡 Syntax

The syntax for the scroll-padding property allows you to specify padding for one or more sides of the scroll container.

Syntax

Copied

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

You can also set specific padding for each side using individual properties:

Syntax

Copied

element {
  scroll-padding-top: length | percentage | auto;
  scroll-padding-right: length | percentage | auto;
  scroll-padding-bottom: length | percentage | auto;
  scroll-padding-left: length | percentage | auto;
}

🎛️ Default Value

The default value of the scroll-padding property is 0 for all sides.

🏠 Property Values

Value	Description
length	Specifies a fixed padding in units like px, em, rem, etc.
percentage	Specifies a padding relative to the width or height of the scroll container.
auto	Lets the browser calculate the padding.

📄 Example

In this example, we'll add scroll padding to ensure that the content is not hidden under a fixed header.

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 Example</title>
  <style>
    body {
      margin: 0;
      height: 200vh;
      scroll-snap-type: y mandatory;
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 50px;
      background: #333;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    section {
      height: 100vh;
      scroll-snap-align: start;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2em;
    }

    #content {
      scroll-padding-top: 50px;
    }
  </style>
</head>
<body>
  <header>Fixed Header</header>
  <div id="content">
    <section style="background: lightcoral;">Section 1</section>
    <section style="background: lightblue;">Section 2</section>
    <section style="background: lightgreen;">Section 3</section>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The scroll-padding 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 property is a valuable tool for enhancing the user experience when using scroll snapping on your web pages.

By controlling the padding around the edges of a scroll container, you can ensure that important content is not hidden and that the layout remains visually appealing. Experiment with different padding values to see how this property can improve the usability and aesthetics of your web projects.