overflow: scroll 强制显示滚动条，即使内容未溢出；应优先用 auto 实现按需滚动，hidden 仅裁剪渲染不阻事件，flex/grid 容器需显式高度约束才触发滚动，移动端需 overscroll-behavior 控制滚动链。
overflow: scroll 会强制显示滚动条，哪怕内容没溢出
很多人加 overflow: scroll 是想“让容器可滚动”，结果发现滚动条永远存在，挤占空间还影响视觉。这不是 bug，是 spec 规定的行为：无论内容是否超出，scroll 都必须渲染滚动条（即使禁用状态）。
适用场景其实很窄：比如需要滚动条占位、避免内容重排（如弹窗高度固定且要保持布局稳定），或者调试时强制触发滚动上下文。
- Chrome/Firefox/Safari 全部遵守该行为，无例外
- 移动端 Safari 在某些 zoom 场景下可能隐藏不可用滚动条，但 DOM 行为仍按
scroll处理 - 如果只是“允许滚动”，优先用
overflow: auto，它只在必要时显示滚动条
overflow: hidden 裁剪内容但不阻止事件穿透
overflow: hidden 看似“关掉一切”，其实只裁剪渲染区域，不影响事件流。子元素超出部分虽然看不见，但 click、hover 仍可能触发——尤其当父容器有 transform 或 will-change 时，渲染层和事件层可能错位。
常见错误现象：下拉菜单被 overflow: hidden 的导航栏裁掉，但鼠标移到“看不见的菜单项”上，:hover 依然生效，甚至能点中。
立即学习“前端免费学习笔记（深入）”；
- 解决办法不是删掉
hidden，而是调整层级结构：把下拉容器移出带overflow: hidden的祖先 - 若必须保留在内，可用
pointer-events: none关闭裁剪区外的事件，但需配合子元素显式设回pointer-events: auto -
hidden不影响getBoundingClientRect()计算，超出部分坐标仍返回真实值
overflow: auto 在 flex/grid 容器里可能失效
当 overflow: auto 加在 display: flex 或 display: grid 的容器上，滚动常常不出现，哪怕子项明显溢出。根本原因是：flex/grid 的默认主轴尺寸计算会忽略溢出，把容器撑开而不是触发滚动。
典型场景：侧边栏用 flex 布局，内部列表很长，但整个侧边栏直接变高，不出现滚动条。
- 必须给容器加明确的块级尺寸约束，比如
height: 300px或max-height: 300px（仅max-height不够，需配合height或min-height） - Flex 子项别用
flex: 1占满剩余空间再溢出，这会让父容器放弃滚动逻辑；改用flex-shrink: 0+ 显式高度控制 - Grid 中类似，
grid-template-rows: 1fr会撑高容器，换成grid-template-rows: minmax(0, 1fr)才支持滚动
移动端 touch 滚动和 overscroll-behavior
iOS 和 Android 对 overflow: auto/scroll 容器的 touch 滚动支持不一致。iOS 默认允许“弹性拖拽”（overscroll bounce），Android 则常截断；更麻烦的是，滚动到底部继续拖，会触发父容器滚动（即“滚动链”），导致页面意外回弹或跳动。
这不是 bug，是浏览器默认滚动传播行为。修复关键在 overscroll-behavior，但它不被所有旧版安卓 WebView 支持。
- 禁用滚动链：对弹窗内的滚动容器加
overscroll-behavior: contain - 完全禁用弹性效果（含下拉刷新）：用
overscroll-behavior-y: none，但注意这也会干掉 iOS 下拉刷新 - 兼容性兜底：Safari 16+ / Chrome 73+ / Firefox 93+ 支持，老安卓 WebView 需靠 JS 监听
touchmove+preventDefault()，但慎用——容易误杀正常滚动
overflow 的行为高度依赖父容器尺寸、display 类型、以及是否介入了 transform 或 will-change。最常被忽略的，是 flex/grid 下忘了给容器设高度约束，结果怎么调 auto 都不滚动。 
