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.

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