Scroll Behavior, Snap and Overscroll

What Is It?

Scrolling properties control movement between anchors, snap positions, and what happens at scroll boundaries.

Properties, Tags and Attributes Explained

• scroll-behavior: smooth requests animated programmatic or anchor scrolling; auto leaves it immediate.
• scroll-snap-type: Chooses a snap axis and strictness on a scroll container.
• scroll-snap-align: Defines where a child snaps inside the snapport.
• scroll-padding / scroll-margin: Reserve inset space for scrolling targets on the container or target.
• overscroll-behavior: Controls scroll chaining and boundary behavior.
• scroll-padding-top: Reserves space at the top of the scrollport when scrolling targets into view.
• scroll-margin-top: Adds an outset to a target scroll area so it can stop below a sticky header.
• overscroll-behavior-x: Controls boundary behavior and chaining specifically along the horizontal axis.
• scrollbar-gutter: stable reserves room for classic scrollbars to reduce width shifts. Overlay scrollbars do not consume such a gutter.
• scrollbar-width: Requests auto, thin, or none scrollbar sizing where supported; preserve an obvious way to scroll.
• scrollbar-color: Sets thumb and track colors where supported; retain sufficient contrast and avoid overriding forced-color user choices.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Snap a horizontal row

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Behavior, Snap and Overscroll</title>
  <style>
    .demo { display: flex; gap: 12px; width: 280px; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
    .demo > div { flex: 0 0 220px; padding: 24px; background: #dbeafe; scroll-snap-align: start; }
  </style>
</head>
<body>
  <div class="demo"><div>One</div><div>Two</div><div>Three</div></div>
</body>
</html>

What you see: Scroll horizontally; each card snaps to the start position.

Example 2: Anchor scrolling

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Behavior, Snap and Overscroll</title>
  <style>
    .demo { height: 160px; overflow: auto; scroll-behavior: smooth; scroll-padding-top: 12px; }
    .spacer { height: 200px; }
    #target { scroll-margin-top: 12px; background: #dcfce7; }
    @media (prefers-reduced-motion: reduce) { .demo { scroll-behavior: auto; } }
  </style>
</head>
<body>
  <div class="demo"><a href="#target">Go to the practice note</a><div class="spacer"></div><p id="target">Practice note</p></div>
</body>
</html>

What you see: The anchor scrolls toward the note with reserved space and honors reduced motion.

Example 3: Use scroll-padding and scroll-margin shorthands

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Behavior, Snap and Overscroll</title>
  <style>
    .panel { height: 150px; overflow: auto; scroll-padding: 16px; }
    .spacer { height: 180px; }
    #note { scroll-margin: 12px; background: #dcfce7; }
  </style>
</head>
<body>
  <div class="panel"><a href="#note">Jump to note</a><div class="spacer"></div><p id="note">An inset scroll target</p><div class="spacer"></div></div>
</body>
</html>

What you see: The container and target both request breathing room when the anchor is brought into view. Use the shorthand when the same inset is needed on several edges.

Example 4: Reserve scrollbar space

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Behavior, Snap and Overscroll</title>
  <style>
    .log { max-height: 120px; overflow: auto; scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: #475569 #e2e8f0; overscroll-behavior: contain; border: 1px solid #64748b; padding: 12px; }
  </style>
</head>
<body>
  <div class="log" tabindex="0" role="region" aria-label="Scrollable study log"><p>Read selectors</p><p>Practice dimensions</p><p>Review Flexbox</p><p>Build a grid</p><p>Test responsiveness</p></div>
</body>
</html>

What you see: The log scrolls with a reserved gutter on systems using classic scrollbars. Remove entries to compare the stable width; overlay-scrollbar systems may show no reserved gutter.

When and Where to Use It

Use scroll snapping for browsable card strips and scroll margins so anchored headings are not obscured by sticky navigation.

Common Mistake or Useful Tip

Do not trap people in a mandatory snap region with oversized inaccessible content. Keep keyboard and ordinary scroll navigation usable.

Try It Yourself

Change mandatory to proximity and compare the snap behavior.