overflow hidden on html lays out the whole page in the click's frame: hold scroll by stopping its events

// before
const html = document.documentElement;
const hasBar = window.innerWidth > html.clientWidth;
if (hasBar) html.style.scrollbarGutter = "stable";
html.style.overflow = "hidden";
// after
useEffect(() => {
  // inside(target): is it within an area that really scrolls (scrollHeight > clientHeight)? Then let it through.
  const stop = (e: Event) => { if (!inside(e.target)) e.preventDefault(); };
  // keys(e): the same for PageUp, PageDown, Home, End, arrows and space, leaving space on a button and arrows on a radio alone.
  document.addEventListener("wheel", stop, { passive: false });
  document.addEventListener("touchmove", stop, { passive: false });
  document.addEventListener("keydown", keys);
  return () => {
    document.removeEventListener("wheel", stop);
    document.removeEventListener("touchmove", stop);
    document.removeEventListener("keydown", keys);
  };
}, []);

/* on each area that scrolls, so reaching its end does not carry on to the page */
.pw-panel { overflow-y: auto; overscroll-behavior: contain; }