Syntax
scroll-behavior: smooth;
scroll-snap-type: x mandatory;Examples
Smooth Anchor Scrolling
Making in-page anchor links (like #section-2) scroll smoothly instead of jumping.
html {
scroll-behavior: smooth;
}
/* Now <a href="#section-2"> smoothly animates the scroll, no JS needed */A CSS-Only Snap Carousel
Building a horizontally scrolling gallery that snaps to each item.
.gallery {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 16px;
}
.gallery img {
scroll-snap-align: center; /* each image snaps to center as the user scrolls */
flex: 0 0 80%;
}Parameters and values
- scroll-behavior (auto | smooth): Controls whether scrolling to anchors/targets is animated
- scroll-snap-type (x | y | both, mandatory | proximity): Enables snap scrolling on a container
- scroll-snap-align (start | center | end): Sets where a child snaps to within the container
Best practices
- Use scroll-behavior: smooth as a simple, one-line upgrade for anchor link navigation, with no JavaScript required
- Use mandatory snap type for carousels where content should always land precisely on an item; use proximity for a softer, less forceful snap
- Combine scroll-snap with overflow: auto/scroll on the container - snap properties do nothing without a scrollable container
- Respect prefers-reduced-motion by disabling scroll-behavior: smooth for users who have requested reduced motion
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Interactive Pseudo-classes
These pseudo-classes style elements based on user interaction state. :hover applies while the pointer is over an element, :focus while it has keyboard focus, :active during the moment of being clicked/pressed, and :visited for links the user has already navigated to.:focus-visible and :focus-within
:focus-visible applies only when the browser determines focus should be visibly indicated - typically keyboard navigation, not a mouse click - solving the old complaint of unwanted focus rings on click. :focus-within applies to a parent element when any descendant inside it has focus, useful for highlighting an entire form group when one of its fields is active.Form State Pseudo-classes
CSS can style form elements based on their validation and interaction state without any JavaScript. :checked applies to checked checkboxes/radios, :disabled to disabled fields, :required and :optional based on the required attribute, and :valid/:invalid based on constraint validation results.Pseudo-elements
Pseudo-elements let you style a specific part of an element rather than the whole thing, or insert generated content without adding extra HTML. ::before and ::after insert content before/after an element's actual content. ::first-line and ::first-letter target specific text portions. ::placeholder styles input placeholder text, and ::selection styles user-highlighted text.
These pseudo-classes style elements based on user interaction state. :hover applies while the pointer is over an element, :focus while it has keyboard focus, :active during the moment of being clicked/pressed, and :visited for links the user has already navigated to.:focus-visible and :focus-within
:focus-visible applies only when the browser determines focus should be visibly indicated - typically keyboard navigation, not a mouse click - solving the old complaint of unwanted focus rings on click. :focus-within applies to a parent element when any descendant inside it has focus, useful for highlighting an entire form group when one of its fields is active.Form State Pseudo-classes
CSS can style form elements based on their validation and interaction state without any JavaScript. :checked applies to checked checkboxes/radios, :disabled to disabled fields, :required and :optional based on the required attribute, and :valid/:invalid based on constraint validation results.Pseudo-elements
Pseudo-elements let you style a specific part of an element rather than the whole thing, or insert generated content without adding extra HTML. ::before and ::after insert content before/after an element's actual content. ::first-line and ::first-letter target specific text portions. ::placeholder styles input placeholder text, and ::selection styles user-highlighted text.