Unlock Immediate Diagonal Scrolling with CSS scroll-axis-lock: none
本文介绍 CSS 新属性 `scroll-axis-lock`，用于控制浏览器默认的滚动轴锁定（railing）行为。当用户在二维滚动容器中的手势沿单一轴向有明显优势时，浏览器会锁定该轴，忽略垂直方向的微小偏移，这有时会阻碍用户立即进行对角线滚动。`scroll-axis-lock: none` 可以禁用此锁定，使滚动完全跟随用户输入。文章通过视频对比了 Chrome 与 Safari 的差异，并提供了交互演示和代码示例。当前仅 Chromium 153 支持，Firefox 和 Safari 尚未支持，作者建议将其作为渐进增强使用。该属性适用于需要精确对角线滚动的场景，但可能引入直线滚动时的抖动，开发者需根据平台差异权衡。
本文以清晰的解释和对比演示，揭示了浏览器滚动轴锁定的底层行为及其对用户体验的影响，并提供了直接的控制手段。适合前端开发者、交互设计师理解并解决二维滚动交互中的“卡顿”问题。文中展示的渐进增强实践和平台差异分析，可迁移至其他新 CSS 特性的评估与应用，具有显著的参考价值。