滚动条在移动端突然出现又消失的根本原因是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> 加 overflow-x: auto 永远无效——表格是替换元素，有自己的渲染规则，不会响应父容器的溢出约束。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 外层包裹 <div class="table-container">，并设 overflow-x: auto 和 white-space: nowrap
• <table> 必须加 display: block，否则仍走原生表格布局流程
• iOS Safari（尤其 15+）要加 -webkit-overflow-scrolling: touch，否则拖拽卡顿或瞬间回弹
• 如果列宽不对齐，检查是否漏了 table-layout: fixed 的前提：width: 100% 在 <table> 上，且每列有显式宽度（<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，否则用户无法用空格键翻页

滚动条不是样式问题，是布局契约。一旦某个容器没被严格约束高度或宽度，溢出行为就不可预测。最易忽略的是：移动端 viewport 缩放会改变 vh 的实际像素值，而 max-height + overflow-y: scroll 的组合才是跨缩放、跨设备稳定的底线方案。