ui-scroll-regions
Scrollable Regions & Frozen Panes
The failure mode to design against: N separate scroll containers held together with JavaScript scroll-sync, each with its scrollbar hidden. It demos fine and ships broken — no visible affordance, sync jitter, and dead zones for wheel/touch input.
Core rule: one native scroll container
Wrap everything that must pan together (ruler/header, all lanes/rows) in a single overflow-x: auto element. Freeze non-scrolling parts (actor/label column) either outside the container or inside it with position: sticky; left: 0.
| Instead of | Do |
|---|---|
One scroll container per row + onScroll sync |
One shared container wrapping all rows |
| Hidden scrollbars + separate 1px "scrollbar strip" | The container's own native scrollbar |
JS guard flags (isSyncing + rAF release) to stop echo loops |
No sync code at all |
| Separate grids for header/body that must align | Header and body as children of the same scrolled element |
Scroll-sync JS is a last resort (e.g. two independent virtualized panes). If forced: sync in onScroll, guard against echo, and know that programmatic scrollLeft fires scroll events before the next rAF — release guards in requestAnimationFrame, and accept that per-frame guards can swallow real user deltas (lag/desync under continuous scrolling).