菜单容器需设max-height和overflow-y: auto实现局部滚动，避免flex或display: contents破坏块流，滚动条样式需跨浏览器适配，iOS旧版需-webkit-overflow-scrolling: touch。
菜单列表容器必须设置固定高度和 overflow-y
局部滚动的本质是让容器内部内容超出时只在该区域产生滚动条，而不是整页滚动。关键在于给菜单的父容器（比如 <ul> 或 <div class="menu">）设明确高度，并强制垂直滚动。
常见错误是只写 overflow: auto 却没限制高度，结果容器随内容撑开，根本不会滚动。
- 必须设置
height或max-height（推荐后者，更灵活） - 搭配
overflow-y: auto（scroll会始终显示滚动条，不推荐） - 确保菜单项（如
<li>）没有意外的white-space: nowrap或浮动导致布局异常
避免子元素影响滚动区域（flex / display: contents 等陷阱）
如果菜单用 display: flex 布局，或子项用了 display: contents，可能破坏块级流，使 overflow 失效——这是最常被忽略的兼容性问题。
Chrome 和 Safari 对 flex 容器内 overflow 的处理较严格，尤其当子项未设 flex-shrink: 0 时，可能压缩内容而非触发滚动。
立即学习“前端免费学习笔记（深入）”；
- 优先用普通块级流（
display: block）+padding/margin控制间距 - 若必须用 flex，请加
flex-direction: column和align-items: flex-start，并确保每个<li>有flex-shrink: 0 - 避免在滚动容器上用
display: contents，它会让容器“消失”，overflow失去作用对象
滚动条样式需单独适配，不能依赖全局设置
默认滚动条丑且占空间，但 ::-webkit-scrollbar 只在 Blink/WebKit 内核生效，Firefox 需用 scrollbar-width 和 scrollbar-color，二者必须同时写才真正跨浏览器可用。
注意：这些样式只能加在滚动容器本身（即设置了 overflow-y 的那个元素），加在 body 或祖先上无效。
- Webkit 写法：
<div class="menu">{ ... } .menu::-webkit-scrollbar { width: 6px; } - Firefox 写法：
.menu { scrollbar-width: thin; scrollbar-color: #666 #f5f5f5; } - 不要用
overflow: overlay—— 已被废弃，现代浏览器不支持
移动端触摸滚动需检查 -webkit-overflow-scrolling
iOS Safari 旧版本（iOS 12 及更早）中，局部滚动区域可能无法流畅拖拽，甚至卡死。虽然新版本已默认启用惯性滚动，但部分混合应用 WebView 仍需显式开启。
这个属性只对 WebKit 有效，且仅作用于设置了 overflow 的元素，加了也没坏处，但别误以为它是“通用加速开关”。
- 加上
-webkit-overflow-scrolling: touch即可（注意：仅限 iOS 旧环境，新系统反而可能引发重绘异常） - 务必测试真机，模拟器有时无法复现滚动阻塞问题
- 如果发现滚动后内容错位，大概率是该属性与
transform或will-change冲突，此时应移除它
overflow，而是看它的盒模型是否被高度约束、子元素是否老实地待在块格式化上下文中。很多问题表面是 CSS，根子在 DOM 结构和 display 层级的隐式交互。 
