The drawer that let the page slide out from under it

html {
  /* For in-page anchor links, long before there was a drawer. */
  scroll-behavior: smooth;
}

useEffect(() => {
  if (!drawerOpen || !isNarrow) return;
 
  const offset = window.scrollY;
  const { style } = document.body;
  const scrollbar = window.innerWidth - document.documentElement.clientWidth;
  const saved = { /* the inline styles this effect overwrites */ };
 
  Object.assign(style, {
    position: "fixed",
    top: `-${offset}px`,
    left: "0",
    right: "0",
  });
  // The scrollbar disappears with the lock; pad so nothing shifts.
  if (scrollbar > 0) style.paddingRight = `${scrollbar}px`;

   return () => {
     Object.assign(style, saved);
     if (!restoreOnUnlock.current) return; // following a link: no restore
 
-    window.scrollTo(0, offset);
+    // An inline style outranks the stylesheet, so this one call jumps;
+    // the old inline value goes straight back afterwards.
+    const html = document.documentElement;
+    const savedBehavior = html.style.scrollBehavior;
+    html.style.scrollBehavior = "auto";
+    window.scrollTo(0, offset);
+    html.style.scrollBehavior = savedBehavior;
   };

   if (event.key === "Escape") {
     event.preventDefault();
     closeDrawer();
-    menuButtonRef.current?.focus();
+    // A plain focus() scrolls the button into view, smoothly, and
+    // undoes the restore that has only just happened.
+    menuButtonRef.current?.focus({ preventScroll: true });
     return;
   }

const sampleFrames = useCallback(() => {
  const vp = viewportRef.current;
  if (!vp) return;
  const seen: number[] = [];
  let n = 0;
  const step = () => {
    seen.push(Math.round(vp.scrollTop));
    n += 1;
    if (n < 5) {
      requestAnimationFrame(step);
    } else {
      setFrames(seen);
    }
  };
  requestAnimationFrame(step);
}, []);