答案是设置 overflow-y: auto 和 overflow-x: hidden；因 overflow-x 默认为 visible，与 overflow-y: auto 冲突，必须显式设 hidden 才能禁用水平滚动并保留垂直滚动功能。

局部滚动容器只允许垂直滚动

当一个 div 设置了 overflow: auto 或 overflow-y: auto，但内容同时溢出水平和垂直方向时，浏览器默认可能显示双滚动条（尤其在未设 width 或含长单词/无换行内容时）。要确保它「只响应垂直滚动、忽略水平溢出」，关键不是靠 JavaScript 拦截事件，而是用 CSS 主动压制水平方向行为：

• overflow-x: hidden 必须显式声明——仅写 overflow-y: auto 不会自动禁用 overflow-x，后者默认是 visible，会导致意外横向滑动或滚动条闪现
• 若容器内有长英文/数字串（如日志 ID、base64），需配合 white-space: normal 或 word-break: break-word，否则 overflow-x: hidden 会裁剪内容而非换行
• 移动端 Safari 对 overflow-x: hidden 的兼容性稳定，但若父级有 transform 或 will-change，可能触发合成层异常，导致水平滚动重新出现

用 scroll-behavior 控制局部滚动的动画方向

scroll-behavior 本身不控制「方向」，只控制「是否平滑」。但它必须作用于**实际可滚动的容器**，且仅对垂直滚动生效（CSS 规范中没有 scroll-behavior-x 这类属性）：

• 给局部容器加 scroll-behavior: smooth 后，调用 element.scrollIntoView({ behavior: 'smooth' }) 才会垂直平滑滚动；水平方向的 scrollLeft 操作仍为瞬时
• 如果容器设置了 direction: rtl 或 writing-mode: vertical-rl，scroll-behavior: smooth 依然只影响主滚动轴（即视口方向对应的轴），不会“反转”方向逻辑
• Firefox 下若容器高度不足（scrollHeight ），<code>scroll-behavior 直接不触发，此时 scrollIntoView 退化为跳转，容易误判为「方向失效」

阻止用户手动拖拽产生水平滚动

即使 CSS 已设 overflow-x: hidden，用户仍可能通过触摸板双指横划、鼠标中键拖拽或键盘 Shift + ↑/↓ 触发水平滚动。这不是 bug，而是浏览器对「非标准滚动源」的默认 fallback 行为：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 监听容器的 wheel 事件，检查 event.deltaX !== 0 && event.deltaY === 0，然后 event.preventDefault()
• 必须传 { passive: false }，否则 Chrome/Firefox 会忽略 preventDefault
• 不要直接监听 html 或 body，否则会影响页面其他区域；应绑定到具体局部容器节点上
• 注意：此法无法拦截 macOS 触控板「惯性横向滚动」，因该行为发生在事件派发前，只能靠 CSS overscroll-behavior-x: contain 辅助抑制

移动端 iOS Safari 的特殊处理

iOS Safari 对局部滚动容器的水平方向控制更敏感，尤其在 position: fixed 或 transform 父级下，overflow-x: hidden 可能完全失效：

立即学习“前端免费学习笔记（深入）”；

• 必须给容器加 -webkit-overflow-scrolling: touch（虽已废弃，但在 iOS 15–17 仍影响滚动判定）
• 避免父级设置 overflow: hidden 同时子级又设 overflow-y: auto，iOS 会优先执行父级裁剪，导致子级无法滚动
• 若容器内含 iframe 或第三方组件（如地图），它们可能自带横向滚动，此时需额外对 iframe 加 sandbox="allow-scripts" 并用 JS 注入样式控制其内部 body

局部滚动方向限制的真正难点不在「怎么写」，而在于「什么时候被绕过」：CSS 层叠顺序、移动端合成层切换、第三方脚本重置样式、甚至用户系统级「强制颜色」或「减少运动」偏好，都可能让 overflow-x: hidden 形同虚设。建议每次修改后，在真机 Safari 和 Chrome for iOS 上用远程调试确认渲染树中的 computed overflow-x 值。