Tillitsdone
down Scroll to discover
Understanding CSS Scroll-Margin-Top Property
Discover the CSS scroll-margin-top property for enhancing scrolling experiences.

Learn its use cases and available options to control the top margin of scroll snap areas.
thumbnail

Introduction

The scroll-margin-top property in CSS defines the top margin of the scroll snap area, helping to snap an element to a specific position in the scroll container. This feature has been available since July 2019 and works well across many devices and browsers.

Specification

The scroll-margin-top property is part of the CSS Scroll Snap Module Level 1 specification. This module provides precise control over scrolling behavior, allowing elements to snap into place within a scroll container.

Description

The scroll-margin-top property defines the top margin of the scroll snap area. This margin determines the spacing between the top edge of an element and the top of the scroll container when the element snaps into place. It creates extra space above the element, enhancing the visual and functional aspects of scrolling.

The value of scroll-margin-top can be set using length units like pixels (px), ems (em), or other CSS length units. The property also supports global CSS values like inherit, initial, revert, revert-layer, and unset.

Syntax

/* <length> values */
scroll-margin-top: 10px;
scroll-margin-top: 1em;
/* Global values */
scroll-margin-top: inherit;
scroll-margin-top: initial;
scroll-margin-top: revert;
scroll-margin-top: revert-layer;
scroll-margin-top: unset;

Values

Length Values

  • px (pixels):
    scroll-margin-top: 10px;
  • em (relative to the font-size of the element):
    scroll-margin-top: 1em;
  • rem (relative to the font-size of the root element):
    scroll-margin-top: 1rem;
  • vh (viewport height):
    scroll-margin-top: 5vh;

Global Values

  • inherit:
    scroll-margin-top: inherit;
  • initial:
    scroll-margin-top: initial;
  • revert:
    scroll-margin-top: revert;
  • revert-layer:
    scroll-margin-top: revert-layer;
  • unset:
    scroll-margin-top: unset;

Formal Definition

  • Initial Value: 0
  • Applies To: All elements
  • Inherited: No
  • Computed Value: Same as specified value
  • Animation Type: By computed value type

Browser Compatibility

  • Google Chrome: 69+
  • Microsoft Edge: 79+
  • Firefox: 68+
  • Opera: 56+
  • Safari: 14.1+

Example

HTML

<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 300px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
border: 1px solid #ccc;
}
.section {
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
font-size: 20px;
color: white;
}
.section1 { background-color: #ff6347; scroll-margin-top: 10px; }
.section2 { background-color: #4682b4; scroll-margin-top: 20px; }
.section3 { background-color: #32cd32; scroll-margin-top: 30px; }
.section4 { background-color: #ffd700; scroll-margin-top: 40px; }
</style>
</head>
<body>
<div class="container">
<div class="section section1">Section 1</div>
<div class="section section2">Section 2</div>
<div class="section section3">Section 3</div>
<div class="section section4">Section 4</div>
</div>
</body>
</html>

Explanation

  • .container: The scrollable container with a fixed width and height. It uses scroll-snap-type: y mandatory to enable mandatory snapping in the vertical direction.
  • .section: Each section is a child of the container and has a fixed height. The scroll-snap-align: start property ensures that the top of each section aligns with the top of the container when snapping.
  • .section1, .section2, .section3, .section4: Each section has a different background color and a unique scroll-margin-top value, allowing you to see how the property affects the scrolling behavior.

Additional Resources

  • CSS Scroll Snap Documentation: WebsiteUrl
  • CSS Scroll Snap Examples: WebsiteUrl
  • Related CSS Properties:
    • scroll-snap-align
    • scroll-snap-type
    • scroll-padding-top
  • Web Development Resources:
    • MDN Web Docs: WebsiteUrl
    • Google Web Fundamentals: WebsiteUrl
    • CSS Tricks: WebsiteUrl
  • Learning and Community:
    • Stack Overflow: WebsiteUrl
    • GitHub: WebsiteUrl
    • Dev.to: WebsiteUrl
Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.