Scroll Behavior
How a page or element scrolls — including smooth scrolling, sticky positioning, and scroll-linked effects.
Plain English
Scroll behaviour covers everything about how users move through vertical (and horizontal) content. Smooth scrolling feels more polished than instant jump-to-anchor. Sticky headers keep navigation accessible without hiding content. Infinite scroll (auto-loading as you scroll) works for social feeds but fails for task-based UIs where users need to know where they are. The cardinal rule: scroll behaviour should serve navigation, not be a design feature in its own right.
Technical
Key CSS: scroll-behavior: smooth (page-wide smooth scrolling — respect prefers-reduced-motion), position: sticky (element stays in view until its parent scrolls off), overflow-y: auto/scroll (scrollable containers), overscroll-behavior (prevents scroll chaining to parent). In JavaScript: element.scrollIntoView({ behavior: "smooth" }) for programmatic scrolling. scroll-snap-type and scroll-snap-align for carousel/slide scroll containers. Performance: avoid scroll event listeners without debouncing/throttling; prefer IntersectionObserver for scroll-based effects.
Live Demo
Scroll Behavior
Auto (instant jump)
Smooth (animated)
Smooth scrolling feels polished. Use it for in-page navigation, not for mandatory UX flows.
Usage
✓ Good usage
Apply scroll-behavior: smooth globally with @media (prefers-reduced-motion: reduce) { scroll-behavior: auto } — smooth scrolling for standard users, instant for motion-sensitive ones.
✗ Bad usage
Scroll-hijacking that overrides the native scroll direction or speed — users lose their physical sense of position in the page.
Recommended values
- scroll-behavior: smooth — page-wide (with reduced-motion fallback)
- Sticky header: position: sticky + top: 0 + z-index: 10
- Sticky table headers: position: sticky + top: 0 on thead/th
- Mobile: -webkit-overflow-scrolling: touch for smooth momentum scrolling in containers
- Scroll snap: scroll-snap-type: x mandatory for horizontal carousels
Common mistakes
- scroll-behavior: smooth without a prefers-reduced-motion override.
- Scroll-jacking — taking over scroll speed or direction.
- Infinite scroll with no ability to navigate to a specific page or back to where you were.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Apply scroll-behavior: smooth to :root. Sticky header: position: sticky, top: 0, z-index: 10. Override with @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }. No custom scroll listeners — use IntersectionObserver for scroll-triggered effects.