Skip to content
Index

Give the scroll back

For a while the graphite shell owned scrolling here. Header pinned at the top, footer pinned at the bottom, and the content trapped in an inner column that scrolled between them. It looked precise in screenshots. In use it was a small prison with rounded corners.

What the container was quietly costing

An inner scroll container re-implements things the browser already does, and every re-implementation drifts:

  • Find-in-page searched the whole document but scrolled the wrong box — matches appeared "nowhere".
  • Keyboard scrolling needed focus gymnastics before Space or the arrow keys did anything.
  • Momentum and overscroll behaved differently inside the column than outside it.
  • Classic scrollbars produced nested bars on systems that still draw them.

None of these are exotic. They are the default ways people move through a page.

What replaced it

The document is the scroller again — exactly one per page. The chrome pins itself with position: sticky instead of caging the content, and two small declarations keep the edges honest:

html {
  /* Anchor targets land clear of the sticky nav. */
  scroll-padding-top: 4.5rem;
  /* `clip`, not `hidden` — no scroll container is created. */
  overflow-x: clip;
}

scroll-padding-top reserves the header strip for anchor jumps. overflow-x: clip kills sub-pixel horizontal drift from zoom and display scaling without creating a second scroller — hidden would have.

The rule going forward

One scroller per surface: the document. Chrome may pin itself; it may never cage content. If a design seems to require an inner scroll region, that is not a layout requirement — it is a bug wearing one.

The browser spent decades learning how a page should scroll. Letting it do its job was the entire fix.