scroll-initial-target
The scroll-initial-target: nearest CSS declaration sets the initial scroll position of its scroll container to the top of the element, much like scrolling to a URL fragment. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The scroll-initial-target: nearest CSS declaration sets the initial scroll position of its scroll container to the top of the element, much like scrolling to a URL fragment. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
scroll-initial-target Experimental | 133 | 133 | | | 133 | |
nearest Experimental | 133 | 133 | | | 133 | |
none Experimental | 133 | 133 | | | 133 | |
Syntax
.latest-message {
scroll-initial-target: nearest;
}
.scroll-container {
overflow-y: auto;
}Live demo
Use cases
Use scroll-initial-target
Use scroll-initial-target when the default CSS behavior is not expressive enough for the component or layout you are building.
Handle edge cases
Apply scroll-initial-target to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test scroll-initial-target in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Confirm that using scroll-initial-target does not make content harder to perceive, understand, or operate in assistive contexts.
Related links
Powered by web-features