/* * Scroll restoration — runs BEFORE first paint (inlined into via * fs.readFileSync in app/layout.tsx). * * Why inline pre-hydration: if the restore ran after React hydration, F5 * would flash y=0 → savedY. The e2e probe "no y=0 frame between DCL and * first rAF" enforces this contract. * * Why not a React hook / Provider: same timing — hooks run post-hydration. * * Schema: sessionStorage["__scroll:" + pathname + search] = JSON{y, ts} * * TTL (60s): fixes the "paste same URL" glitch. Every scroll event refreshes * ts (debounced 150ms), so F5 during active browsing preserves. If user * leaves for a minute+ and pastes URL, ts is stale → restore skipped → page * opens fresh at top. Can't distinguish F5 from paste-same-URL via * PerformanceNavigationTiming.type (both are "reload" in Chrome), so TTL * heuristic on "time since last scroll interaction" is the cleanest signal. * * TTL applies ONLY on fromInitial=true (DCL / reload / paste-URL path). * popstate (back/forward) always restores regardless of age — returning * via browser history is an explicit "I want where I was" signal, even if * the user spent minutes on the next page before hitting Back. * * CRITICAL: when TTL is expired, we set history.scrollRestoration="manual" * at IIFE time (synchronously, in , before initial layout). Without * this, Chrome's native scrollRestoration="auto" would re-scroll the user * to their saved position on paste-same-URL (which Chrome treats as a * reload of the current history entry, whose scrollY is cached natively * by the browser). Our DCL-fired restore cannot beat the native pre-paint * scroll — the only effective counter is to disable native in the same * script where we detect staleness. * * save() skips y<=0: on click App Router fires scrollTo(0,0) on the * OLD path ~300ms BEFORE pushState commits. The debounced write would race * and save "0" to the OLD path, wiping real position. * * save() skips when location.hash is present — symmetric with restore(). * Without this /product#reviews would write scrollY into a hash-less key * mis-match, so a later plain /product visit would restore mid-page. * * apply() only scrolls when scrollY=y AND scrollY>=y-2, on user interaction * (wheel/touchmove/PageDown), or after 3s fallback. */ (function () { try { sessionStorage.getItem("__sr"); } catch { return; } var TTL_MS = 60000; function K() { return "__scroll:" + location.pathname + location.search; } // Decide scrollRestoration mode BEFORE browser does its native pre-paint // restore. Inline scripts execute during HTML parse, before initial // layout, so setting "manual" here is early enough to suppress native // restore for this load. // // "auto" (default / fresh entry): browser restores pre-paint → zero flash // on F5 and on back/forward where the entry is still fresh. // // "manual" (TTL expired): browser would otherwise re-scroll the user to // their old position on paste-same-URL (Chrome reloads, native restore // fires). Switching to manual here is the only way to win — our DCL // restore cannot beat native which runs pre-paint. We also evict the // stale entry so subsequent code paths see no state. // // Hash URLs are left at "auto" so the browser can anchor-jump naturally. var srMode = "auto"; if (!location.hash) { try { var initialRaw = sessionStorage.getItem(K()); if (initialRaw && initialRaw.charAt(0) === "{") { var initialEntry = JSON.parse(initialRaw); if (initialEntry && typeof initialEntry.ts === "number" && Date.now() - initialEntry.ts > TTL_MS) { srMode = "manual"; sessionStorage.removeItem(K()); } } } catch { /* ignore */ } } if ("scrollRestoration" in history) history.scrollRestoration = srMode; var saveTimer; var restoring = false; var cancelActive = null; // Pending save holds what the 150ms debounce is about to write. flush() // on pagehide uses it to commit synchronously. Critical: ts is captured // at user-scroll time, NOT at flush time. Otherwise pagehide (which // fires on every nav-away, including "paste URL hours later") would // refresh ts, making TTL a no-op for the exact case it's supposed to // catch — user left the page idle and came back via a fresh navigation. var pendingSave = null; function writeEntry(key, y, ts) { try { sessionStorage.setItem(key, JSON.stringify({ y: y, ts: ts })); } catch { /* ignore */ } } function save() { if (restoring) return; if (location.hash) return; var y = scrollY; if (y <= 0) return; // Snapshot key NOW, not at timer-fire. App Router can push a new path // within the 150ms debounce window; writing with the fresh pathname // would pollute the new route's saved scroll with the old route's y. pendingSave = { key: K(), y: y, ts: Date.now() }; clearTimeout(saveTimer); saveTimer = setTimeout(function () { if (pendingSave) writeEntry(pendingSave.key, pendingSave.y, pendingSave.ts); pendingSave = null; }, 150); } function flush() { if (restoring) return; clearTimeout(saveTimer); // Only commit the pending scroll that save()'s debounce was about to // write — reusing its ts. If there's no pending scroll (user hasn't // interacted recently), the last-written entry's ts stays correct and // we leave it alone. This is what makes TTL detect "page left idle". if (pendingSave) { writeEntry(pendingSave.key, pendingSave.y, pendingSave.ts); pendingSave = null; } } function readEntry(checkTTL) { var raw; try { raw = sessionStorage.getItem(K()); } catch { return 0; } if (!raw) return 0; if (raw.charAt(0) !== "{") { // Legacy entry from before TTL migration — drop it. try { sessionStorage.removeItem(K()); } catch { /* ignore */ } return 0; } var entry; try { entry = JSON.parse(raw); } catch { try { sessionStorage.removeItem(K()); } catch { /* ignore */ } return 0; } if (!entry || typeof entry.y !== "number" || typeof entry.ts !== "number") return 0; if (checkTTL && Date.now() - entry.ts > TTL_MS) { try { sessionStorage.removeItem(K()); } catch { /* ignore */ } return 0; } return entry.y; } function restore(fromInitial) { if (cancelActive) cancelActive(); if (location.hash) return; // TTL only on initial/reload path. popstate bypasses — see header comment. var y = readEntry(fromInitial); if (y <= 0) return; if (fromInitial && scrollY >= y - 2) return; var done = false; var ro = null; var timeoutId = 0; restoring = true; function cleanup() { if (done) return; done = true; restoring = false; if (ro) ro.disconnect(); if (timeoutId) clearTimeout(timeoutId); removeEventListener("keydown", onKey); if (cancelActive === cleanup) cancelActive = null; } cancelActive = cleanup; function apply() { if (done) return; var max = Math.max(0, document.documentElement.scrollHeight - innerHeight); var target = Math.min(y, max); if (scrollY < target) scrollTo(0, target); if (max >= y && scrollY >= y - 2) cleanup(); } apply(); ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(apply) : null; if (ro) ro.observe(document.body); addEventListener("wheel", cleanup, { once: true, passive: true }); addEventListener("touchmove", cleanup, { once: true, passive: true }); function onKey(e) { var blockers = ["PageUp", "PageDown", "Home", "End", " ", "ArrowUp", "ArrowDown"]; if (blockers.indexOf(e.key) >= 0) cleanup(); } addEventListener("keydown", onKey); timeoutId = setTimeout(cleanup, 3000); } addEventListener("scroll", save, { passive: true }); addEventListener("pagehide", flush); addEventListener("popstate", function () { restore(false); }); if (document.readyState === "loading") { addEventListener("DOMContentLoaded", function () { restore(true); }); } else { restore(true); } })();

Купить оптом