The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Create vertical scrolling | .panel { max-block-size: 24rem; overflow-y: auto; } | View examples |
| Reserve scrollbar space | .panel { scrollbar-gutter: stable; } | View examples |
| Smooth programmatic scroll | html { scroll-behavior: smooth; } | View examples |
| Respect reduced motion | @media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; };
} | View examples |
| Enable proximity snap | .carousel { scroll-snap-type: inline proximity; } | View examples |
| Align a snap target | .slide { scroll-snap-align: start; } | View examples |
| Require a stop | .critical-step { scroll-snap-stop: always; } | View examples |
| Offset the scrollport | html { scroll-padding-block-start: 5rem; } | View examples |
| Offset one target | section { scroll-margin-block-start: 5rem; } | View examples |
| Contain scroll chaining | .modal-body { overscroll-behavior: contain; } | View examples |
| Suppress boundary effects | .canvas { overscroll-behavior: none; } | View examples |
| Stable target link | <a href="#installation">Installation</a> | View examples |
Scrolling is a core navigation mechanism, not merely an animation surface. Constrain only intentional regions, preserve keyboard and touch access, use proximity snapping for flexible content, offset anchored targets from sticky UI, and avoid trapping users by suppressing overscroll too broadly.
Step by step
Detailed examples
Create the fewest nested scroll regions possible
overflow:auto exposes scrolling only when needed; the box needs a constrained size. Nested regions can make wheel, touch, and keyboard navigation confusing. stable scrollbar gutters reduce width shifts without forcing an always-visible scrollbar.
.log { max-block-size: 24rem; overflow-y: auto; scrollbar-gutter: stable; border: 1px solid #94a3b8; }Apply smooth scrolling as a preference
scroll-behavior affects navigation and programmatic scroll, not direct user wheel or touch behavior. The user agent may ignore it. Large animated travel can disorient, so disable it under reduced-motion preference and do not delay focus updates to imitate scrolling.
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }Prefer proximity snapping for variable content
scroll-snap-type defines an axis and strictness; children opt in with scroll-snap-align. mandatory snapping can make oversized content impossible to reach because the viewport keeps returning to a snap position. Test keyboard, touch, zoom, and dynamic sizes.
.carousel { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: inline proximity; }
.slide { flex: 0 0 min(80%, 24rem); scroll-snap-align: start; }Keep anchored content clear of sticky headers
scroll-padding applies to the scroll container and scroll-margin to a target. Both influence snapping and scroll-into-view geometry without fake spacer elements. Preserve native fragment links because they support URLs, history, and no-script navigation.
html { scroll-padding-block-start: 5rem; }
[id] { scroll-margin-block-start: 5rem; }
.site-header { position: sticky; inset-block-start: 0; }Contain scroll chaining only at genuine boundaries
overscroll-behavior:contain stops an inner region from scrolling its ancestor at the boundary while retaining platform boundary feedback. none suppresses both chaining and effects such as pull-to-refresh. Restrict it to dialogs, maps, or canvases with a specific interaction requirement.
.dialog-body { max-block-size: 70dvb; overflow-y: auto; overscroll-behavior-block: contain; }Local code tester
Try scroll snapping and offsets
Scroll a proximity carousel and adjust snap alignment, gutter, and overscroll behavior.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.