The default axis-lock finally has an off switch
You built a map. Or a canvas, or a wide diagram — anything scrollable on both axes. The user drags at a rough 45 degrees and the view slides sideways. Or straight down. Never diagonally. Somewhere between the touchpad and the viewport, the browser decided you meant one axis and latched onto it. That behaviour has a name: scroll axis locking, sometimes just "railing". Until now you had no CSS…
The default behavior of scrolling on a 2D scroller has changed with the introduction of the scroll-axis-lock property in CSS Overflow 5 specification. This property gives developers an off switch for the automatic axis locking that occurs when users drag or swipe on a scrollable area. The default value is auto, allowing the browser to lock scrolling to the dominant axis of the input gesture.
The new alternative value, none, turns off this axis locking, resulting in a more direct scrolling experience, such as a diagonal drag scrolling diagonally. This feature is particularly useful for wide diagrams, maps, game boards, whiteboards, and flowcharts where users expect to pan diagonally. The property is currently supported in Chromium, but not in Firefox or Safari.
Implementing scroll-axis-lock: none as a progressive enhancement can provide a smoother scrolling experience for all users, without regressing functionality on engines that do not support the feature.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — it may contain errors, so check the original before relying on it.
