Unlock Immediate Diagonal Scrolling with CSS scroll-axis-lock: none
This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).
The CSS `scroll-axis-lock` property, introduced in the CSS Overflow 5 specification, lets developers disable the browser's default scroll-locking ("railing") behavior. By setting `scroll-axis-lock: none` on a scroll container, users can immediately scroll diagonally without the browser snapping their gesture to a single axis. The default value `auto` preserves existing browser behavior. As of the post's publication, Chromium 153 supports it, while Firefox and Safari do not. Because it degrades gracefully, it can be used as progressive enhancement without feature detection. Feature detection via `@supports` is available if needed.
Table of contents
Scroll Axis Locking?Control scroll axis-locking with scroll-axis-lockTry it yourself# Browser SupportFeature DetectionQuestions this post answers
How do I enable diagonal scrolling in CSS without the browser locking to one axis?
Set `scroll-axis-lock: none` on the scroll container. This disables the browser's default railing behavior, which locks a scroll gesture to a single axis when movement is predominantly one-directional. With `none`, the container faithfully follows the user's exact pointer input in both axes simultaneously. The property is part of CSS Overflow 5 and is supported in Chromium 153; Firefox and Safari do not yet support it. Front-end developers shipping scroll-heavy UIs track new CSS property support like this on daily.dev.
Which browsers support the CSS scroll-axis-lock property?
Chromium 153 (Blink engine) supports `scroll-axis-lock`. Firefox (Gecko) and Safari (WebKit) do not support it. Because unsupported browsers simply ignore the property, it can be used as a progressive enhancement without breaking existing scroll behavior, making feature detection optional rather than required. Keeping up with cross-browser CSS support gaps is easier when the web platform news comes to you — developers follow it on daily.dev.