局部垂直滚动需设 overflow-y: auto 和 overflow-x: hidden，并限定容器高度；失效主因是高度未约束、内容隐藏或父级裁剪；Bootstrap 中需确保 html/body 及祖先元素高度闭环；scroll-behavior: smooth 仅在实际可滚动且直接设置的元素上生效。
只让局部区域垂直滚动，禁用水平溢出
当一个 div 内容过宽（比如长表格、代码块或横向列表），又只想让它能上下滚、不能左右拖，关键不是靠 overflow: auto 一刀切。它默认会同时启用 x/y 方向滚动，容易出现意外的横向滑动条。
正确做法是显式分离控制：
-
overflow-y: auto—— 允许内容超出高度时出现垂直滚动条 -
overflow-x: hidden—— 强制截断超出宽度的内容，不显示水平滚动条 - 必须给容器设固定高度（如
height: 300px）或最大高度（max-height），否则overflow-y不生效 - 若内部元素用了
white-space: nowrap或display: inline-block等易撑宽的样式，要额外检查是否被父容器的overflow-x: hidden剪掉部分内容
局部滚动区域禁止滚动，但保留内容可见
有时候你已经设了 overflow-y: auto，结果发现滚动条“消失”了，或者鼠标滚轮没反应——大概率不是 CSS 写错了，而是容器本身不可滚动。
常见原因包括：
- 容器高度未限制：
height或max-height缺失，导致内容自然撑开，没有溢出，也就无需滚动 - 内部内容被
display: none、visibility: hidden或opacity: 0隐藏，浏览器认为无溢出 - 父级有
overflow: hidden且高度不足，把子容器整个裁剪掉了 - 使用了 Flex/Grid 布局但未设
align-items: flex-start或min-height: 0，导致子项无法收缩（尤其在嵌套 flex 容器中）
Bootstrap 5 中 card-body 局部滚动失效的典型场景
在 Bootstrap 5 的 .card 结构里，常对 .card-body 设 overflow-y: auto，但页面仍出现全局滚动条，甚至局部滚动条压根不出现。这不是 Bootstrap 的 bug，而是布局链路没闭环。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
核心问题在于：html/body 默认可滚动，而 .card-body 的高度依赖父级（.card → .row → .container）是否真正占满视口。
- 必须确保
html, body { height: 100%; }，否则百分比高度计算失效 -
.card和其祖先容器（如.row）也要设height: 100%或flex: 1，否则.card-body拿不到可滚动空间 - 如果用了
position: absolute或transform，可能触发新的层叠上下文或格式化上下文，间接影响 overflow 行为 - 移动端 Safari 对
overflow: auto的局部滚动支持较弱，建议加-webkit-overflow-scrolling: touch（仅 iOS 旧版需要）
scroll-behavior: smooth 在局部滚动中为什么不动
给 .card-body 加了 scroll-behavior: smooth 却没效果？不是语法错，而是它根本没被当作“可滚动容器”来对待。
这个属性只在满足两个硬性条件的元素上起作用：
- 该元素自身必须可滚动（即：有
overflow-y: auto或scroll，且内容实际溢出） -
scroll-behavior必须直接写在该元素上，不继承，也不能写在父级 - 如果用 JS 调用
element.scrollIntoView({ behavior: 'smooth' })，目标元素必须在当前滚动容器内，且未被overflow: hidden父级遮挡 - 用户开启了系统「减少运动」偏好（
@media (prefers-reduced-motion: reduce)），浏览器会静默降级为非平滑滚动
最容易被忽略的是：局部滚动容器里的锚点跳转（如 a[href="#item-5"]）不会自动触发 scroll-behavior，除非目标元素在该容器内、且有对应 id；外部链接或 JS 手动调用才是可控路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
