一个视频彻底看懂CSS scroll-axis-lock none的作用
内容提要
CSS 新增 scroll-axis-lock 属性，用于控制手势滚动时是否自动锁定单一坐标轴。默认值 auto 会忽略微小偏移，保持单轴滚动；设为 none 则允许地图、画布等场景双轴同时滚动。该属性仅作用于触摸和拖拽，不影响滚轮，目前仅 Chrome 支持，属渐进增强特性。
延伸解读
轴锁定机制的实际影响
默认的轴锁定会忽略手势中的微小偏移，使滚动保持单轴，这能避免手滑导致的斜向漂移，提升常规浏览体验。但在需要双轴同时滚动的场景，如地图或画布，这种过滤会干扰操作。理解这一机制有助于判断何时需要调整默认行为。
适用场景与属性选择
对于地图、画布、大图查看器等需要自由斜向滚动的交互，设置 scroll-axis-lock: none 可以关闭轴锁定，让水平和垂直方向的位移都生效。而普通网页滚动通常保持默认 auto 即可，无需额外设置。
兼容性与渐进增强
scroll-axis-lock 目前仅 Chrome 支持，属于渐进增强特性。在不支持的浏览器中，滚动行为保持不变，不会影响功能可用性。开发者可以放心使用，支持的环境体验更佳，不支持则维持现状。
与 overscroll-behavior 的区分
overscroll-behavior 控制滚动到边界后的行为，如回弹或触发返回；scroll-axis-lock 则控制滚动过程中是否过滤另一轴的增量。此外，scroll-axis-lock 只作用于触摸和拖拽手势，不影响鼠标滚轮，两者作用阶段和输入方式不同。
Q&A
CSS scroll-axis-lock 属性是做什么的？
scroll-axis-lock 是 CSS Overflow Module Level 5 的新属性，用于控制浏览器是否自动将滚动手势锁定到单一坐标轴。默认值 auto 会忽略另一轴的微小位移，保持单轴滚动；设为 none 则允许双轴同时滚动。
scroll-axis-lock: none 在哪些场景下有用？
在地图、画布、大图查看器等需要斜向双轴同时滚动的场景下，默认的轴锁定会干扰操作，此时使用 scroll-axis-lock: none 可以关闭单轴锁定，让水平和垂直方向的位移都生效。
scroll-axis-lock 的默认值 auto 有什么行为？
默认值 auto 会启用轴锁定启发规则：当手势偏向某一轴时，浏览器会抹掉另一轴的微小滚动量，只进行单轴滚动，从而避免手滑带来的斜向漂移。
scroll-axis-lock 属性目前浏览器兼容性如何？
scroll-axis-lock 是非常新的 CSS 特性，目前只有 Chrome 浏览器支持。不过它属于渐进增强特性，不支持也不影响现有功能。
scroll-axis-lock 和 overscroll-behavior 有什么区别？
overscroll-behavior 控制滚动到边界之后的行为，而 scroll-axis-lock 控制滚动过程中是否过滤另一轴的滚动增量。此外，scroll-axis-lock 只作用于手势滚动（触摸、鼠标拖拽），不影响鼠标滚轮。
scroll-axis-lock 会影响鼠标滚轮滚动吗？
不会。scroll-axis-lock 属性只作用于手势滚动，包括触摸和鼠标拖拽，不影响鼠标滚轮，滚轮滚动不受该属性控制。
