配了五年对角线滚动，每次在地图里一滑就被卡死——今天 CSS 自己会放行了

你在做一个地图功能，用手指在屏幕上划了个对角线——结果浏览器把你的手势「掰直」了，只走了 X 轴或者 Y 轴。地图没有对角线滑动，整个交互卡在原地。这就是 scroll-axis-lock，2026 年之前每个做地图/全景图/数据表格的开发者都被它卡过。

Chrome 153（2026-08 稳定版）正式带来了 CSS scroll-axis-lock 属性，一行 CSS 把这件事彻底解了。

根子在哪

浏览器的滚动系统在用户手势结束时，会把「锁定轴」的决定权从你的手指上收走。判断逻辑是：手势终点偏向哪个轴，就全走哪个轴，手势的 Y 分量直接被忽略。这个机制本意是防止误触——在纯纵向的列表里，斜着滑一下就跳到横向会很烦。但在地图、全景图、2D 画布这类本身就是二维操作的界面里，这个「好意」直接变成了破坏交互的元凶。

scroll-axis-lock: none 怎么用

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

auto 是默认值，也就是浏览器原来那套轴锁逻辑。设成 none，滚动容器就会忠实地跟随你的指针输入，X 和 Y 同时生效，对角线手势不会被截断。

Adam Argyle（Chrome DevRel）在看到 Bramus 的博文后，第一时间把它用在自己的 2D 滚动 snap demo 里——那个 demo 之前无论怎么调参数，对角线手势都会被截成单向滚动。加上 scroll-axis-lock: none 之后，问题直接消失了。

适合哪些场景

对角线滚动被解锁之后，以下这几类交互体验会直接受益：

• 地图类：Google Map、高德地图这类 2D 画布，对角线滑动是最自然的手势
• 360 度全景图：需要 XY 两个方向同时控制视角
• 数据表格：行列都很多的情况下，斜着扫过去是最快方式
• 无限画布工具：Figma 类设计工具，对角线拖拽是核心操作
• 图片缩放：缩放过程中需要平移，天然二维

浏览器支持

截至 2026 年 8 月：

• Chromium（Chrome/Edge 153+）：✅ 支持
• Firefox：❌ 尚不支持
• Safari：❌ 尚不支持

Firefox 和 Safari 还没支持看起来是个坑，但由于这个属性是「渐进增强友好」的——浏览器不认识它的时候直接忽略，不会破坏任何已有行为——你可以直接写进去，不需要 feature detection。如果真的需要保险，用 @supports 判一下即可：

@supports (scroll-axis-lock: none) {
  .scroller { scroll-axis-lock: none; }
}

配合 overscroll-behavior 一起用

单独设 scroll-axis-lock: none 还不够，因为滚动到边界时会触发页面级滚动（也就是「弹性滚动」），手势会窜到外层容器去。配合 overscroll-behavior: contain 一起用，把越界手势锁在当前容器内：

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

这两个组合是地图/画布类场景的标准配置，缺一不可。

下一步：把这个配进你的项目

如果你现在正在做任何涉及 2D 手势的界面，打开开发者工具，找到那个滚动容器，把这两行配进去试试：

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

体验差距是即时的。对角线滑一下试试，你就知道这件事值多少。Chrome 153 稳定版已经在 2026 年 8 月推送，这个 CSS 新增的能力现在是 production-ready 的，不需要任何 polyfill。