76 Focus Without Scroll. 76 of 95.
76/FOCUS MANAGEMENT/76 of 95
Focus Without Scroll
Focus should not yank the viewport.
The problem
Programmatic focus on an off-screen control scrolls the page abruptly, breaking reading position and orientation.
The solution
preventScrollOnFocus keeps the viewport stable while focus moves logically.
Experiment
Play with the values
How it works
- The next focus target may sit outside the current viewport.
- Focus is called with preventScroll so the browser does not scroll it into view automatically.
- DOM focus still moves, so keyboard and assistive tech follow the logical target.
- The viewport stays where the user left it.
- Scrolling happens only when the user asks to move, not as a side effect of focus.
Seen in
Skip links
Moving focus to main content without an abrupt jump mid-page.
Wizard steps
Focus advances to the next field without scrolling the whole form.
Infinite lists
Roving focus updates without yanking the virtualized viewport.
Sticky headers
Focusing controls under a sticky bar avoids unwanted scroll compensation.