Black Lives Matter! ✊🏾

scroll-margin

Represents outsets defining the scroll snap area that is used for snapping this box to the snapport. 5.1. Scroll Snapping Area: the scroll-margin property

Links about scroll-margin

  1. How to prevent anchor links from scrolling behind a sticky header with one line of CSS

    posted on by Chris Ferdinandi

    Yesterday, we looked at how to create sticky headers with the position: sticky CSS property. One problem with sticky headers are anchor links. By default, they snap to the top of the document, behind the sticky navigation menu. You can see it yourself in this demo. Today, I want to talk about a CSS …

  2. Fixed Headers and Jump Links? The Solution is scroll-margin-top | CSS-Tricks

    posted on by Chris Coyier

    The problem: you click a jump link like <a href=”#header-3″>Jump</a> which links to something like <h3 id=“header-3”>Header</h3>.

  3. scroll-margin

    posted on by MDN

    The scroll-margin property is a shorthand property which sets all of the scroll-margin longhands, assigning values much like the margin property does for the margin-* longhands.

  4. scroll-margin-top / scroll-padding, smooth scroll and fixed headers

    by Sven Wolfermann

  5. fixed headers jump :target (IE11 version)

    by Sven Wolfermann

Code sample

section {
scroll-margin-top: 2rem;
}