滚动条在移动端突然出现又消失的根本原因是overflow: auto依赖渲染时的尺寸比对，而缩放、dpr变化、ios safari的viewport计算偏差会导致浏览器误判是否溢出，其设计逻辑本身就不稳定。
滚动条为什么在移动端突然出现又消失
根本原因是 overflow: auto 依赖渲染时的尺寸比对，而缩放、DPR 变化、iOS Safari 的 viewport 计算偏差都会让浏览器误判“是否溢出”。你看到的“有时有、有时没”，不是 bug，是 auto 的设计逻辑本身就不稳定。
- 别用
overflow: auto控制弹窗或侧边栏——它在 75% 缩放下大概率失效 - 改用
overflow-y: scroll强制启用纵向滚动，哪怕内容没溢出也保留滚动能力 - 移动端必须加
touch-action: pan-y，否则手指拖拽可能触发整页滚动而非容器内滚动 -
max-height: 80vh比height: 80vh更安全，避免因 margin/padding 累计导致意外溢出
嵌套容器滚动失效：h-full 为什么没用
h-full 不是魔法，它只在父容器有明确高度上下文时才生效。如果外层是 div 且没设 height 或 max-height，h-full 就等于“尽可能高”，结果就是子容器撑开整个页面，滚动发生在 body 而非目标区域。
- 外层容器（如 .main）必须加
overflow: hidden，这是拦截溢出的第一道闸门 - 滚动目标容器需同时满足：
height: 100%（或h-full）、overflow-y: auto、且父级高度已锁定 - 用 CSS Grid 替代 flex 布局更可靠：比如
body { display: grid; grid-template-rows: auto 1fr auto; }，让中间区自动占满剩余空间 - 避免在滚动容器内写
position: absolute的子元素，它会脱离文档流，破坏高度计算
表格在 iOS 上不滚动：关键三步缺一不可
直接给 <table> 加 <code>overflow-x: auto 永远无效——表格是替换元素，有自己的渲染规则，不会响应父容器的溢出约束。
- 外层包裹
<div class="table-container">，并设 <code>overflow-x: auto和white-space: nowrap <table> 必须加 <code>display: block，否则仍走原生表格布局流程- iOS Safari（尤其 15+）要加
-webkit-overflow-scrolling: touch，否则拖拽卡顿或瞬间回弹 - 如果列宽不对齐，检查是否漏了
table-layout: fixed的前提：width: 100%在<table> 上，且每列有显式宽度（<code><col width="20%">或th { width: 20%; }）隐藏滚动条但保留滚动功能：跨浏览器写法不能少
单靠
::-webkit-scrollbar { display: none }只能干掉 Chrome/Safari，Firefox 和 Edge 会照常显示。现代项目必须覆盖全部主流引擎。- Firefox 用
scrollbar-width: none（推荐）或废弃的overflow: -moz-scrollbars-none - Edge/IE 用
-ms-overflow-style: none - Chrome/Safari 必须配
::-webkit-scrollbar { width: 0; height: 0; }，仅display: none在部分版本中不生效 - 隐藏后务必测试滚动是否仍可用：用键盘方向键、触控板惯性滚动、手机手指拖拽都得验证
- 不要对
body直接隐藏滚动条——弹窗打开时再切overflow: hidden，否则用户无法用空格键翻页
vh的实际像素值，而max-height+overflow-y: scroll的组合才是跨缩放、跨设备稳定的底线方案。 - Firefox 用
