Unlock Immediate Diagonal Scrolling with CSS scroll-axis-lock: none

The new CSS scroll-axis-lock property allows you to disable the browser’s default scroll axis-locking behavior (aka “railing”), allowing users to immediately perform a diagonal scroll. ~ Scroll Axis Locking? By default, a browser often “locks” a user’s scrolling gesture to a single axis when that gesture starts with significantly more movement in one axis than in the perpendicular axis. For example, say a user drags their finger on the screen such that the element underneath the finger would be scrolled by 500px in the y-axis and 3px in the x-axis. Because the gesture is almost entirely vertical, the browser might interpret the user’s intent to be a perfectly vertical scroll. As such, the browser can ignore the 3px scroll delta and (possibly) all further x-axis deltas for the remainder of the gesture. In this case, the browser has “locked” the scroll to the y-axis — a technique also known as “railing”. https://www.bram.us/wordpress/wp-content/uploads/2026/08/scroll-axis-lock-example.mp…