rick@tillitsdone.com

+66824564755

Scroll to discover

CSS scroll-margin-block Enhance Scrolling Experience

The CSS scroll-margin-block property enhances scrolling by setting margins in the block dimension.

Use it to control scroll snap areas and improve user experience.

Options include length values and global values like inherit and initial.

Introduction

The scroll-margin-block CSS property is a handy tool for web developers. It lets you set the scroll margins of an element along the block dimension, which is great for controlling the behavior of scroll snap areas. Introduced in July 2019, it’s widely supported across modern browsers, making it reliable for enhancing user experience on websites.

Baseline Availability

The scroll-margin-block property is well-supported across many devices and browser versions. It works in:

Google Chrome
Microsoft Edge
Mozilla Firefox
Opera
Safari

Description

The scroll-margin-block property defines the scroll margins of an element in the block dimension. It’s useful for creating visually appealing and intuitive scrolling experiences. This property is a shorthand for scroll-margin-block-start and scroll-margin-block-end, allowing you to set both values in a single declaration.

Constituent Properties

The scroll-margin-block property is a shorthand for:

scroll-margin-block-start:
- Defines the scroll margin at the start of the block dimension.
- Syntax: scroll-margin-block-start: <length> | inherit | initial | revert | revert-layer | unset;
scroll-margin-block-end:
- Defines the scroll margin at the end of the block dimension.
- Syntax: scroll-margin-block-end: <length> | inherit | initial | revert | revert-layer | unset;

Syntax

Here is the syntax for scroll-margin-block:

/* <length> values */
scroll-margin-block: 10px;
scroll-margin-block: 1em 0.5em;

/* Global values */
scroll-margin-block: inherit;
scroll-margin-block: initial;
scroll-margin-block: revert;
scroll-margin-block: revert-layer;
scroll-margin-block: unset;

Values

The scroll-margin-block property accepts the following values:

<length>:
- Specifies the outset from the corresponding edge of the scroll container.
- Example: scroll-margin-block: 10px;
Global Values:
- inherit: Inherits the value from the parent element.
- initial: Sets the property to its initial value, which is 0.
- revert: Reverts the property to the default value as specified by the user agent.
- revert-layer: Reverts the property to the default value as specified by the cascade layer.
- unset: Resets the property to its natural value.
- Example: scroll-margin-block: inherit;

Formal Definition

The scroll-margin-block property is formally defined as a shorthand for setting the scroll margins of an element in the block dimension. Here are the key characteristics:

Initial Value:
- scroll-margin-block-start: 0
- scroll-margin-block-end: 0
Applies To: All elements.
Inherited: No.
Computed Value:
- scroll-margin-block-start: as specified
- scroll-margin-block-end: as specified
Animation Type: By computed value type.
Formal Syntax:
```
scroll-margin-block = <length>[{1,2}]
```

Specifications

The scroll-margin-block property is defined in the CSS Scroll Snap Module Level 1 specification. This module outlines the behavior and usage of scroll snap properties.

Specification: [CSS Scroll Snap Module Level 1]WebsiteUrl

Browser Compatibility

The scroll-margin-block property is widely supported across modern browsers:

Google Chrome: Supported since version 69.
Microsoft Edge: Supported since version 79.
Mozilla Firefox: Supported since version 68.
Opera: Supported since version 56.
Safari: Supported since version 14.1.

Example

Here’s a simple example to demonstrate the use of the scroll-margin-block property:

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .page {
            width: 278px;
            height: 296px;
            box-sizing: border-box;
            color: white;
            font-size: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            scroll-snap-align: end none;
        }

        .container {
            width: 300px;
            height: 300px;
            overflow-x: hidden;
            overflow-y: auto;
            white-space: nowrap;
            scroll-snap-type: y mandatory;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page" style="background-color: rgb(95, 236, 14); scroll-margin-block: 90px;">
            Geeks
        </div>
        <div class="page" style="background-color: rgb(25, 143, 25); scroll-margin-block: 90px;">
            for
        </div>
        <div class="page" style="background-color: rgb(110, 228, 129); scroll-margin-block: 90px;">
            Geeks
        </div>
        <div class="page" style="color: black; scroll-margin-block: 90px;">
            for
        </div>
        <div class="page" style="background-color: rgb(25, 143, 25); scroll-margin-block: 90px;">
            Geeks
        </div>
    </div>
</body>
</html>

In this example, scrolling through the container will snap to each .page element with a defined margin of 90px at the block start and end, creating a visually appealing and intuitive scrolling experience.

Related Topics

To further enhance your understanding and usage of the scroll-margin-block property, consider exploring these related topics:

CSS Scroll Snap: Learn more about the CSS scroll snap module, which includes properties like scroll-snap-type, scroll-snap-align, and scroll-snap-stop.
Well-controlled Scrolling with CSS Scroll Snap: Explore practical examples and best practices for using CSS scroll snap to create intuitive and visually appealing scrolling interfaces.
CSS Shorthand Properties: Understand the concept of shorthand properties in CSS, which allow you to set multiple related properties in a single declaration, making your code more concise and easier to manage.
CSS Length Units: Familiarize yourself with the various length units available in CSS, such as px, em, rem, vh, etc., and learn how to use them effectively to control the layout and appearance of your elements.
CSS Box Model: Deepen your understanding of the CSS box model, which defines the rectangular boxes that are generated for elements in the document tree. This knowledge is crucial for effectively using properties like scroll-margin-block.
CSS Writing Modes: Learn about CSS writing modes, which control the direction of text flow. Understanding writing modes is essential for correctly applying scroll-margin-block-start and scroll-margin-block-end.
CSS Flexbox and Grid Layouts: Explore how scroll-margin-block can be integrated with CSS Flexbox and Grid layouts to create more complex and responsive designs.

By delving into these related topics, you can gain a more comprehensive understanding of CSS and how to use it effectively to create engaging and user-friendly web experiences.

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-scroll-behavior.png

CSS Scroll-Behavior Enhance User Experience The CSS scroll-behavior property enhances user experience by allowing smooth scrolling animations. Options include 'auto' for instant scrolling and 'smooth' for smooth transitions.

css_property_cover/css-property-overscroll-behavior.png

CSS overscroll-behavior Controlling Scroll Effects Learn about CSS overscroll-behavior, a powerful property for controlling scroll effects like bounce and chaining. Explore available options auto, contain, and none.

css_property_cover/css-property-overscroll-behavior-x.png

CSS overscroll-behavior-x Control Horizontal Scroll The CSS overscroll-behavior-x property controls horizontal scrolling behavior. Use it to prevent unwanted scroll chaining and ensure a smoother user experience. Options include 'auto', 'contain', and 'none'.

css_property_cover/css-property-scroll-padding-block.png

CSS scroll-padding-block Enhance Scrolling Experience CSS scroll-padding-block enhances scrolling by adding padding around scrollable areas. Use it to avoid content being obscured by fixed elements like headers. Options include auto, length, and percentage values.

css_property_cover/css-property-scroll-snap-align.png

Mastering CSS scroll-snap-align for Smooth Scrolling Discover how to use the CSS scroll-snap-align property to create smooth and controlled scrolling experiences. Options include none, start, end, and center. Enhance your web design with precise alignment and navigation.

css_property_cover/css-property-scroll-margin-top.png

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.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep 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

Facebook Instagram LinkedIn

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.

DesignRush
web design companies

Goodfirms