CSS scroll-padding-top Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 29 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The scroll-padding-top property in CSS is used to set the top padding of the scroll snap area at the start of the container’s scrollport.

This property is particularly useful in web applications that implement scroll snapping, ensuring that the content aligns correctly within the viewport.

💡 Syntax

The syntax for the scroll-padding-top property is simple and can be applied to any scroll container.

Syntax

Copied

element {
  scroll-padding-top: value;
}

Here, value can be any valid CSS length value, such as px, em, rem, %, etc.

🎛️ Default Value

The default value of the scroll-padding-top property is auto, which means the browser determines the amount of padding automatically.

🏠 Property Values

Value	Description
length	A fixed length, such as 10px, 2em, etc.
percentage	A percentage of the containing block’s height, such as 10%.
auto	The browser calculates the padding automatically.

📄 Example

In this example, we'll set the top scroll padding to 20 pixels to ensure that the content snaps with a bit of space at the top.

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-top Example</title>
  <style>
    .scroll-container {
      height: 200px;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
      scroll-padding-top: 20px;
    }
    .snap-item {
      height: 200px;
      scroll-snap-align: start;
      background-color: lightcoral;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>Scroll Padding Top Example</h1>
  <div class="scroll-container">
    <div class="snap-item">Item 1</div>
    <div class="snap-item">Item 2</div>
    <div class="snap-item">Item 3</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The scroll-padding-top 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-top property is a valuable tool for web developers looking to enhance the user experience with scroll snapping.

By customizing the top padding, you can ensure that your content aligns perfectly within the viewport, providing a smooth and visually appealing scrolling experience. Experiment with different padding values to see how this property can improve the usability of your web projects.