scroll-behavior

Controls the scroll behavior of a page or scroll container. Applying sbs enables smooth scroll animation when navigating via anchor links.

Class List

Class	CSS	Description
`sba`	scroll-behavior: auto	Default. Instant jump navigation
`sbs`	scroll-behavior: smooth	Smooth scroll animation

Class Details

`sba`scroll-behavior: auto

Browser default. Anchor link navigation or scrollTo() calls jump instantly to the target position. Used when fast navigation without animation is needed.

<!-- Default scroll behavior (instant) -->
<div class="sba oh h20rem">
  <div id="section-a">Section A</div>
  <div id="section-b">Section B</div>
</div>

`sbs`scroll-behavior: smooth

Anchor link clicks or scrollTo() calls apply smooth scroll animation. Typically applied to the html tag or scroll container.

<!-- Apply smooth scroll to full page -->
<html class="sbs">
  <body>
    <a href="#section1">Go to Section 1</a>
    <a href="#section2">Go to Section 2</a>
    ...
    <div id="section1">Section 1</div>
    <div id="section2">Section 2</div>
  </body>
</html>

<!-- Apply to specific scroll container only -->
<div class="sbs oh h30rem">
  <a href="#item1">Item 1</a>
  <a href="#item2">Item 2</a>
  <div id="item1" class="mt4rem">Item 1 Content</div>
  <div id="item2" class="mt4rem">Item 2 Content</div>
</div>

Application target

sbs must be applied to the scrolling container. Apply to the html tag for the entire page, or to the specific scroll container for a particular area.

Usage Examples

Pattern for applying smooth scroll to in-page TOC (table of contents) navigation.

<!-- TOC Navigation + smooth scroll -->
<html class="sbs">
  <body>
    <nav class="pf t0 l0 w20rem h100vh oya p2rem">
      <a href="#intro" class="db py8px c38BDF8 tdn">Introduction</a>
      <a href="#usage" class="db py8px c38BDF8 tdn">Usage</a>
      <a href="#api" class="db py8px c38BDF8 tdn">API</a>
    </nav>
    <main class="ml20rem p4rem">
      <section id="intro">Introduction content...</section>
      <section id="usage">Usage Content...</section>
      <section id="api">API Content...</section>
    </main>
  </body>
</html>

Tips & Notes

prefers-reduced-motion

Consider disabling smooth scroll under prefers-reduced-motion: reduce media query for motion-sensitive users.

Relationship with JS scrollTo

JavaScript's element.scrollTo({ behavior: 'smooth' }) is independent of CSS scroll-behavior. Applying sbs in CSS makes scrolling smooth even without specifying behavior in JS.

overflow overscroll-behavior