Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS scroll-margin Property

Posted in CSS Tutorial
Updated on Oct 07, 2024
By Mari Selvan
👁️ 13 - Views
⏳ 4 mins
💬 1 Comment
CSS scroll-margin Property

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
Copy To Clipboard
element {
  scroll-margin: value;
}

🎛️ Default Value

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

🏠 Property Values

ValueDescription
lengthSpecifies the margin around the element in units such as px, em, rem, etc.
percentageSpecifies 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
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy