--- title: "Unlock Immediate Diagonal Scrolling with CSS scroll-axis-lock: none" url: https://daily.dev/posts/unlock-immediate-diagonal-scrolling-with-css-scroll-axis-lock-none-yjtrmj2rr source_url: https://www.bram.us/2026/08/09/unlock-immediate-diagonal-scrolling-with-css-scroll-axis-lock-none type: article source: "Bram.us" published: 2026-08-09T08:19:54.657Z updated: 2026-08-09T08:20:18.838Z tags: ["webdev", "css"] reading_time: 4 upvotes: 1 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Unlock Immediate Diagonal Scrolling with CSS scroll-axis-lock: none **[Bram.us](https://daily.dev/sources/bram)** · 4 min read · 1 upvotes · 0 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions 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._ ## Similar posts on daily.dev - [Scroll Axis Lock · August 10, 2026](https://daily.dev/posts/scroll-axis-lock-august-10-2026-cwfnxgqxn) · Adam Argyle · 9 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/unlock-immediate-diagonal-scrolling-with-css-scroll-axis-lock-none-yjtrmj2rr)