--- title: Unlock Immediate Diagonal Scrolling with CSS... description: The CSS `scroll-axis-lock` property, introduced in the CSS Overflow 5 specification, lets developers disable the browser's default scroll-locking ("railing")... canonical: https://daily.dev/posts/unlock-immediate-diagonal-scrolling-with-css-scroll-axis-lock-none-yjtrmj2rr twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Unlock Immediate Diagonal Scrolling with CSS scroll-axis-lock: none | daily.dev og:description: The CSS `scroll-axis-lock` property, introduced in the CSS Overflow 5 specification, lets developers disable the browser's default scroll-locking ("railing")... og:url: https://daily.dev/posts/unlock-immediate-diagonal-scrolling-with-css-scroll-axis-lock-none-yjtrmj2rr og:image: https://api.daily.dev/og/posts/yjtRmJ2RR.png og:image:alt: Unlock Immediate Diagonal Scrolling with CSS scroll-axis-lock: none og:image:width: 1200 og:image:height: 630 og:locale: 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 ### What does the CSS scroll-axis-lock: none property do? It disables the browser's default scroll axis-locking (railing) behavior, letting a scroll container faithfully follow the exact diagonal input of a user's gesture instead of snapping to a single axis. The property also accepts auto, the default, which locks scrolling to one axis when a gesture is predominantly one-dimensional. It is defined in the CSS Overflow 5 specification. _Track new CSS properties like scroll-axis-lock as they gain browser support on daily.dev._ ### Which browsers support the CSS scroll-axis-lock property? Chromium 153 supports scroll-axis-lock, while Firefox (Gecko) and Safari (WebKit) do not yet support it. Because unrecognized CSS properties are ignored without breaking anything, developers can already declare scroll-axis-lock as a progressive enhancement without needing feature detection, though @supports or CSS.supports() can check for it if needed. _Developers tracking CSS feature rollout across browsers can follow updates like this on daily.dev._ ### What is scroll axis-locking or railing in browsers? Scroll axis-locking, also called railing, is when a browser detects that a scroll gesture is predominantly moving along one axis (for example mostly vertical with a small horizontal component) and then locks the scroll to that single axis, ignoring further perpendicular movement for the rest of the gesture. Behavior varies by browser and platform: Safari on macOS locks strictly, Chrome on macOS applies lighter locking, and touch-only platforms like iPhone typically don't lock at all. _Follow how scroll interaction details like axis locking differ across browsers 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 - [Issue \#754: Five CSS properties for eye-catching text designs — Frontend Focus](https://daily.dev/posts/issue-754-five-css-properties-for-eye-catching-text-designs-frontend-focus-vlexqgptd) · Frontend Focus · 6 upvotes · 0 comments - [Scroll-Driven CSS in 2026: Building Carousels Without JavaScript](https://daily.dev/posts/scroll-driven-css-in-2026-building-carousels-without-javascript-o8z3jgfok) · SitePoint · 19 upvotes · 1 comments - [CSS position: sticky now sticks to the nearest scroller on a per axis basis\!](https://daily.dev/posts/css-position-sticky-now-sticks-to-the-nearest-scroller-on-a-per-axis-basis--xurethi42) · Bram.us · 53 upvotes · 0 comments - [Scroll-driven CSS animations](https://daily.dev/posts/scroll-driven-css-animations-uw6plcluy) · Flavio Copes · 141 upvotes · 6 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) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"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","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/unlock-immediate-diagonal-scrolling-with-css-scroll-axis-lock-none-yjtrmj2rr"},"datePublished":"2026-08-09T08:19:54.657Z","dateModified":"2026-09-14T06:16:43.234Z","description":"The CSS `scroll-axis-lock` property, introduced in the CSS Overflow 5 specification, lets developers disable the browser's default scroll-locking (\"railing\")...","image":"https://media.daily.dev/image/upload/s--1KxV4ohY--/f_auto/v1722860400/public/Placeholder%2007","thumbnailUrl":"https://media.daily.dev/image/upload/s--1KxV4ohY--/f_auto/v1722860400/public/Placeholder%2007","isAccessibleForFree":true,"articleSection":"Bram.us","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Bram.us","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/3db2116954be44df873ec24cf0e03d14","url":"https://daily.dev/sources/bram"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/unlock-immediate-diagonal-scrolling-with-css-scroll-axis-lock-none-yjtrmj2rr","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,css","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Bram.us","item":"https://daily.dev/sources/bram"},{"@type":"ListItem","position":3,"name":"Unlock Immediate Diagonal Scrolling with CSS scroll-axis-lock: none"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/unlock-immediate-diagonal-scrolling-with-css-scroll-axis-lock-none-yjtrmj2rr#faq","mainEntity":[{"@type":"Question","name":"What does the CSS scroll-axis-lock: none property do?","acceptedAnswer":{"@type":"Answer","text":"It disables the browser's default scroll axis-locking (railing) behavior, letting a scroll container faithfully follow the exact diagonal input of a user's gesture instead of snapping to a single axis. The property also accepts auto, the default, which locks scrolling to one axis when a gesture is predominantly one-dimensional. It is defined in the CSS Overflow 5 specification. Track new CSS properties like scroll-axis-lock as they gain browser support on daily.dev."}},{"@type":"Question","name":"Which browsers support the CSS scroll-axis-lock property?","acceptedAnswer":{"@type":"Answer","text":"Chromium 153 supports scroll-axis-lock, while Firefox (Gecko) and Safari (WebKit) do not yet support it. Because unrecognized CSS properties are ignored without breaking anything, developers can already declare scroll-axis-lock as a progressive enhancement without needing feature detection, though @supports or CSS.supports() can check for it if needed. Developers tracking CSS feature rollout across browsers can follow updates like this on daily.dev."}},{"@type":"Question","name":"What is scroll axis-locking or railing in browsers?","acceptedAnswer":{"@type":"Answer","text":"Scroll axis-locking, also called railing, is when a browser detects that a scroll gesture is predominantly moving along one axis (for example mostly vertical with a small horizontal component) and then locks the scroll to that single axis, ignoring further perpendicular movement for the rest of the gesture. Behavior varies by browser and platform: Safari on macOS locks strictly, Chrome on macOS applies lighter locking, and touch-only platforms like iPhone typically don't lock at all. Follow how scroll interaction details like axis locking differ across browsers on daily.dev."}}]} ```