HP5007 (scroll-reset) means the page scrolled on its own while it hydrated.
A user who had already scrolled down to read lost their place. It usually comes
from code that scrolls or moves focus when the page loads. Do not change the
scroll position during hydration; let the browser restore it.
| Code | HP5007 |
|---|---|
| Name | scroll-reset |
| Default severity | Warning |
| Group | Interaction during hydration |
| What it means | The page scrolled on its own while it hydrated, so the user lost their place. |
What the HP5007 scroll reset finding means
The finding comes from the interaction checks
(checks.interactions: true or --interactions). With the page's scripts
held back, hydration-proof scrolls down, lets the page hydrate and compares the
scroll position. A change of more than 50 pixels is reported:
The page was scrolled to 1200px before hydration and ended at 0px.Pages without scrollable content are skipped. It is a warning.
Likely causes
window.scrollTo(0, 0)in an effect that runs on mount, often meant to reset the scroll on route changes.focus()on load, which scrolls the focused element into view.- A hydration mismatch that replaces a large part of the page, so the content under the reader changes height.
How to fix it
Do not change the scroll position during hydration (scrollTo in effects,
focus() on load); let the browser restore it.
"use client";
import { useEffect, useRef } from "react";
export function SearchField() {
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
// Before: inputRef.current?.focus() scrolled the page to the field
inputRef.current?.focus({ preventScroll: true });
}, []);
return <input ref={inputRef} type="search" name="q" />;
}Leave scrolling on navigation to the framework's router: it restores the position on back and forward and scrolls to the top on new pages, without running on the first load.
When it is intentional
A page that jumps to a section on purpose can be ignored with an
ignore.issues rule for code: "HP5007" and its route; see
ignoring findings.