Intent to Prototype: CSS sticky positioning in single-axis scroll containers

[Chromestatus]

Contact emails

freede...@google.com

Explainer

No information provided

Specification

No information provided

Summary

Keeps CSS sticky positioning working when horizontal and vertical scrolling come from different containers. This helps developers build wide tables and data grids with horizontally scrollable content and vertically sticky headers, without duplicating headers or synchronizing scroll in JavaScript.

Blink component

Blink>Layout

Web Feature ID

sticky-positioning

Motivation

CSS sticky positioning currently resolves against a single nearest scroll container, which breaks common layouts where horizontal and vertical scrolling come from different ancestors. A common case is a wide table or data grid that scrolls horizontally inside a vertically scrolling page: the header should remain visible as the page scrolls, while horizontally sticky content should stay attached to the inner scroller. Today the inner horizontal scroller becomes the sticky reference for both axes, so vertical sticking becomes ineffective. Allowing sticky constraints to resolve per axis makes these split-axis layouts work with normal CSS. Without this, authors resort to duplicated headers, DOM restructuring, or JavaScript scroll synchronization.

Initial public proposal

https://github.com/w3c/csswg-drafts/issues/865

Goals for experimentation

None

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/481019005

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5067363861004288?gate=5107178476273664

This intent message was generated by Chrome Platform Status.