[css-overflow-5] Allow controlling scroll axis locking behavior

[flackr]

When a user performs a scroll gesture (e.g., on a trackpad or touchscreen) that is nearly vertical or nearly horizontal, browsers typically apply an "axis locking" heuristic (sometimes referred to as "scroll railing"). This snaps the scroll delta to a single axis, ignoring the smaller delta on the perpendicular axis.

While this default behavior is desirable for reading flows to prevent accidental drift, it is hostile to 2D interfaces such as maps, zoomed in images, large diagrams, or infinite canvases. In these cases, users often intend to pan diagonally, but the browser's locking heuristic forces a stair-step movement or requires significant force or angle to "break" the lock.

I propose we introduce a new property, allowing developers to opt-out of this input heuristic on scroll containers, e.g.

overflow-axis-lock: proximity | none;

The values are intentionally aligned with scroll-snap-align, and we could consider adding a mandatory value in the future.

Open questions:

• Should the initial value be proximity or should it be auto to allow the UA to decide default and to allow authors to opt in to proximity even if UA doesn't use it by default?
• Should we introduce mandatory axis locked scrolls?