body{overflow:hidden}常失效，因浏览器根滚动容器是html而非body，需同时设置html{overflow:hidden}并确保html高度为100%或100vh，否则body高度塌陷导致溢出透传。
body{overflow:hidden} 为什么有时没用
直接给 body 加 overflow: hidden 看似能“关掉”页面滚动条，但实际常失效——因为 html 元素本身仍可溢出。浏览器默认把滚动行为委托给 html（根元素），尤其在 Chrome/Firefox 中，body 的 overflow 设置会被忽略，真正起作用的是 html 的 overflow 状态。
常见错误现象：加了 body { overflow: hidden } 后，页面依然能上下/左右拖动，或局部滚动容器外还有一层隐藏的滚动区域。
- 必须同时设置
html和body的overflow，且优先级要明确 -
html高度需设为100%或100vh，否则body的高度计算可能塌陷 - 移动端 Safari 对
html { overflow: hidden }支持不稳定，建议搭配position: fixed容器兜底
如何让 card-body 滚动而不带全局滚动条
Bootstrap 5 的 .card-body 默认不处理高度和溢出，直接加 overflow-y: auto 很可能无效——因为父级（如 .card、.row、.container）没有约束高度，导致内容撑开整个页面，触发全局滚动。
关键不是“给 card-body 加 overflow”，而是“切断它向上透传的高度和滚动”。实操要点：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 确保
.card或其直接父容器有显式高度，例如height: calc(100vh - 80px)或max-height: 600px -
.card-body必须设overflow-y: auto且max-height: 100%（不能只靠height: 100%，flex 布局下易失效） - 若使用 Flex 布局，父容器要加
flex-direction: column并给.card-body设flex: 1 1 auto，否则高度不收缩 - 避免在
.card上设overflow，否则会截断box-shadow或border-radius
移动端双滚动条抖动怎么稳住
桌面端加 html { overflow-y: scroll } 能锁死宽度防抖动，但移动端强制显示滚动条既丑又不合规。更合理的做法是：隐藏全局滚动条 + 保证局部容器滚动可靠。
真正容易被忽略的点在于滚动行为的“触发时机”：
- Phaser、Three.js、Swiper 等库动态注入内容时，
.card-body初始为空，CSSoverflow不生效；需等内容渲染完成再手动触发一次el.style.overflow = 'auto' - Safari iOS 对
overflow: auto容器内position: sticky或position: fixed元素极其敏感，会导致高频重绘抖动；应把这类元素移出滚动容器，挂到body下 - 局部滚动容器若含图片或异步加载内容，首次渲染后高度突变，可能瞬间触发两次滚动条出现/消失；可用
ResizeObserver监听并统一重置overflow
iframe 嵌套里双滚动条怎么剪掉一个
嵌套 iframe 出现内外两层滚动条，本质是父页和子页都各自启用了滚动。最稳妥的剪法不是“禁掉谁”，而是“接管谁”。
推荐组合策略：
- 父页面的
iframe标签加scrolling="no"（虽已过时但兼容性最好），同时 CSS 设iframe { overflow: hidden } - 子页面的
html和body必须设height: 100%; overflow: hidden，防止自身滚动抢占 - 子页面内容容器（如
#app）设height: 100vh; overflow-y: auto，滚动行为完全由它承担 - 若子页面需响应父页高度变化，用
window.parent.postMessage()主动上报高度，父页动态调整iframe.height，比100vh更可靠
复杂点永远在边界：滚动条是否可见，取决于“内容高度是否超过容器高度”，而这个“高度”在 flex/grid/viewport 单位/JS 动态插入混合场景下，极易因计算顺序错乱而误判。别依赖单一 CSS 规则，要结合容器约束、内容就绪时机、以及跨浏览器渲染差异来协同控制。
