北京
你构建了一张地图、一块画布，或者一张宽幅图表——任何能在横竖两个方向滚动的界面。用户沿大致45度方向拖动时，视图却只横向滑动，或者干脆垂直滚动，从来不是斜着走。在触控板与视口之间的某个环节，浏览器认定你只想滚动一个轴，并牢牢锁住。
这种行为有个名称：滚动轴锁定（scroll axis locking），有时也叫“扶轨/railing”。此前，CSS 对此没有任何控制手段。Bramus Van Damme 介绍了 CSS Overflow 5 规范中的新属性 scroll-axis-lock，让开发者第一次可以直接干预这个行为。
属性作用
scroll-axis-lock 接受两个值。auto 是默认值：浏览器按输入手势自动判断并锁定到占优的轴，这也是当前已发布浏览器的行为。none 则关闭锁定：一个二维滚动容器会直接跟随输入向量，斜向拖拽就斜向滚动。
这个属性就到此为止。在滚动容器上加一句声明即可：
.map { overflow: auto; scroll-axis-lock: none; }
不需要 JavaScript 钩子、不需要 wheel 事件 hack、不需要每帧向量计算。你只是在告诉渲染引擎：别再替我套用启发式规则。
为什么会有扶轨
轴锁定并非设计疏忽。在触控板或鼠标滚轮上，偏离主方向的小误差才是常态。把滚动吸附到主轴，才能让长文章感觉是“往下滚”，而不是每次轻扫都横向漂移几像素。
但当滚动面不是文章时，代价就暴露了。地图、棋盘、白板、宽幅流程图，用户的斜向平移就是本意。那个30度滑动是刻意输入的，此时强行锁定垂直轴，会让应用像是在和用户较劲。
当前行为也不统一。Bramus 指出，iPhone 等纯触屏平台通常不锁轴；macOS 上的 Safari 锁得很严；Chrome on macOS 则只做部分锁定。同一页面在三种环境里手感不同，但谈不上谁对谁错——每一家都只是按自己的方式处理。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
