CSS scroll-margin Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 19 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The scroll-margin property in CSS allows developers to define the margin around an element when it is scrolled into view.

This property is particularly useful for ensuring that elements are not flush against the edge of the viewport when using functions like scrollIntoView(). By adjusting the scroll margin, you can create a more visually pleasing and user-friendly scrolling experience.

💡 Syntax

The scroll-margin property can be applied to any element, and it accepts length values for specifying the margin around the element when it is scrolled into view.

Syntax

Copied

element {
  scroll-margin: value;
}

🎛️ Default Value

The default value of the scroll-margin property is 0, meaning no additional margin is applied.

🏠 Property Values

Value	Description
length	Specifies the margin around the element in units such as px, em, rem, etc.
percentage	Specifies the margin around the element as a percentage of the element's size.

📄 Example

In this example, we'll add a scroll margin to a section element to ensure it is not flush against the top of the viewport when scrolled into view.

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-margin Example</title>
  <style>
    section {
      height: 100vh;
      border: 1px solid black;
    }

    .target {
      scroll-margin-top: 50px;
    }
  </style>
</head>
<body>
  <h1>Scroll Margin Example</h1>
  <button onclick="document.querySelector('.target').scrollIntoView({ behavior: 'smooth' })">Scroll to Section 3</button>
  <section>Section 1</section>
  <section>Section 2</section>
  <section class="target">Section 3</section>
  <section>Section 4</section>
</body>
</html>

🖥️ Browser Compatibility

The scroll-margin 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-margin property is a useful tool for enhancing the user experience when dealing with scrollable content.

By defining margins around elements that are scrolled into view, you can create a more comfortable and visually appealing navigation experience. Experiment with different values and see how this property can improve the usability of your web projects.