demo · v138

Sticky-header-aware scroll

The motivating real-world case: a sticky table header that used to hide the target row when scrollIntoView({ block: "start" }) aligned it to the scroller’s edge. The new container option (and the related scroll-padding integration) finally fixes it without a JS offset hack.

checking support…

Left: { block: "start" } — pre-138 default, the row hides under the sticky header. Right: { block: "start", container: "nearest" } — 138, the scroller respects its own scroll-padding.

before — container option absent

after — { container: "nearest" }

the option

// pre-138: scrollIntoView walks every scrollable ancestor.
//          A sticky header inside the same scroller is invisible to it.
target.scrollIntoView({ block: "start" });

// 138+: container option says "only the nearest scrolling ancestor",
// AND it now consults scroll-padding-top — so a sticky header
// can declare its own clearance and rows land below it.
target.scrollIntoView({ block: "start", container: "nearest" });
.scroller { scroll-padding-top: 40px; }

see also