Scroll Axis Lock

I first noticed web scroll areas had scroll locking behavior when making 2D scroll snap demos; I couldn't scroll diagonally without getting hijacked and locked into an x or y axis.

Even on a touch device, where a diagonal gesture is so easy and natural.

Thanks to Bramus's rad interactive blog post I saw Chrome 153 with the remedy:

.scroller {
  overflow: auto;
  overscroll-behavior: contain;
  scroll-axis-lock: none; 👈
}

spec | check for support

Freedom from the axis lock 🤘🏻

Use cases #

I was thinking:

1. swipe to dismiss interactions
2. flings
3. maps or infinite canvas navigating
4. datagrids or tables
5. image zoom scrolling around
6. 360 pano images or 3D model panning
7. data vis exploration

Just seems worth while to use the natural inertia, tensions, perf and feels that scroll snap has for the snap feedback of "didnt swipe far enough" and the browser owned easing.

Can also mitigate scrollTo strangeness that might do x then y.

I did log a bug #

I saw some performance regressions in the first 2 demo's I pulled up to test with

1. swipe prototype
2. snap matrix

Filed a bug.

I wouldn't necessarily file this as perfectly fixed, I still felt it was a bit clumsy or not enabling diagonal scrolling as smoothly as I'd like.

Overall exciting and meaningful IMO tho.

Your thoughts?