局部滚动无方向设置，需用overflow-x:hidden显式禁用水平滚动并拦截wheel事件deltaX；scroll-behavior:smooth仅控制平滑，不控制方向。
局部滚动本身没有「方向设置」这个操作——浏览器只按容器主轴自动启用垂直或水平滚动，所谓“控制方向”，其实是通过 CSS 主动压制某一个轴、再配合 JS 拦截异常输入来达成效果。
overflow-x: hidden 必须显式写，不能省略
很多人只写 overflow-y: auto，以为这样就能“只允许垂直滚动”，结果在 Safari 或 Chrome 下仍出现横向滚动条或意外滑动。这是因为 overflow-x 默认值是 visible，和 auto 冲突，必须显式设为 hidden 才能真正禁用水平方向。
- 正确写法：
overflow-y: auto; overflow-x: hidden; - 错误写法：
overflow-y: auto;（overflow-x仍是visible） - 若容器内有长英文/数字串（如日志 ID），还需加
word-break: break-word或white-space: normal，否则内容会被裁剪而非换行 - 移动端 Safari 对
overflow-x: hidden兼容性好，但若父级用了transform或will-change，可能触发合成层异常，导致水平滚动重新出现
wheel 事件拦截 deltaX 才能阻止手动横划
即使 CSS 已设 overflow-x: hidden，用户仍可能通过触摸板双指横划、鼠标中键拖拽、或键盘 Shift + ↑/↓ 触发水平滚动。这不是 bug，而是浏览器对非标准滚动源的 fallback 行为。
- 监听容器的
wheel事件，检查event.deltaX !== 0 && event.deltaY === 0 - 满足条件时调用
event.preventDefault()，但必须绑定时传{ passive: false } - 不要绑在
document或window上，只针对具体滚动容器节点 - 此法无法拦截 macOS 触控板的「惯性横向滚动」，因该行为发生在事件派发前；可配合
overscroll-behavior-x: contain辅助抑制
scroll-behavior: smooth 不控制方向，只控制是否平滑
scroll-behavior 是个常被误解的属性：它不决定滚动朝上还是朝下，也不区分 X/Y 轴，只决定「已触发的滚动是否带动画」。而且它只对实际可滚动的容器生效，且仅影响主滚动轴（通常是 Y 轴）。
立即学习“前端免费学习笔记（深入）”；
- 必须写在滚动容器上，例如：
main { scroll-behavior: smooth; }，写在html或body上无效 - 只对
scrollTo()、scrollIntoView()和锚点跳转起作用；直接赋值scrollTop = 100不会触发平滑效果 - Firefox 下若容器
scrollHeight <= clientHeight，scroll-behavior直接不触发，scrollIntoView退化为瞬跳，容易误判为“方向失效” - 用户开启系统级「减少运动」偏好时，该属性自动失效，这是符合规范的行为，无需绕过
真正难处理的不是“怎么设方向”，而是「如何让压制水平滚动的行为在各种边界场景下都稳定」——比如 flex 子项高度塌陷、transform 父级干扰、Safari 的 scrollHeight 计算偏差、或是 iOS 上 touchpad 惯性滚动无法拦截。这些细节不暴露在 CSS 层面，得靠实测和降级策略兜底。
