scroll-behavior

Setting the scrolling behavior for a scrolling box.

Overview

Examples

Enable smooth anchor scrolling

Use scroll-behavior:smooth on the scrolling container or root element when anchor navigation should animate.

<main class="scroll-behavior:smooth">    ...</main>

@layer utilities {    .scroll-behavior\:smooth {        scroll-behavior: smooth    }}

Keep static output immediate

Use scroll-behavior:auto when a context should jump directly, such as print or automated layout measurement.

<main class="scroll-behavior:smooth scroll-behavior:auto@print">    ...</main>

Combine with scroll offsets

Smooth scrolling pairs well with scroll-mt:* on the destination element or scroll-pt:* on the container.

<main class="scroll-behavior:smooth scroll-pt:16x">    <section id="details" class="scroll-mt:16x">Details</section></main>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<main class="scroll-behavior:smooth scroll-behavior:auto@print">...</main>