Chrome 153 introduces a CSS property to disable scroll axis locking, enabling natural diagonal scrolling in web scroll areas. Previously, scroll snap behavior would hijack diagonal gestures and lock them to a single axis. The new feature opens up use cases like swipe-to-dismiss, map navigation, data grids, image zoom, and 360 panorama panning. The author notes some performance regressions in early demos and considers the diagonal scrolling not yet perfectly smooth, but views the addition as exciting and meaningful overall.

1m read timeFrom nerdy.dev
Post cover image
Table of contents
Use cases #I did log a bug #

Questions this post answers

What CSS property in Chrome 153 allows diagonal scrolling without axis lock?

Chrome 153 ships a CSS scroll axis lock property that lets scroll areas move diagonally instead of being hijacked into a single x or y axis. This is useful for swipe-to-dismiss interactions, map or infinite canvas navigation, data grids, image zoom, and 360 panorama panning. Early demos show some performance regressions, so the feature is not yet perfectly smooth. Developers building touch-friendly scroll interactions track browser feature rollouts like this on daily.dev.

35.9K Impressions