给容器设固定高度和 overflow: auto 实现局部滚动，本质是让该容器自身产生滚动条；用 flex 布局可固定头尾、中间 flex:1 + overflow-y: auto；需配 scroll-behavior: smooth 并拦截锚点默认行为。
给容器加 overflow: auto 并设固定高度
局部滚动的本质，就是让某个元素自己产生滚动条，而不是靠整个页面滚动。最直接的做法是：选中目标 <div>，给它设置固定高度（比如 <code>height: 400px）和 overflow: auto（或 scroll）。浏览器会自动在内容超出时显示滚动条，且只影响该容器内部。
注意这些细节：
-
overflow: hidden会隐藏溢出内容但不显示滚动条，不能滚动 -
overflow: scroll强制显示滚动条（即使没溢出），可能干扰布局 -
overflow: auto是推荐值——有内容溢出才显示滚动条，体验更自然 - 如果父容器用了
display: flex，记得子容器要设flex: none或明确高度，否则可能撑开父级导致意外滚动
用 flex 布局固定头尾、中间局部滚动
常见需求是“顶部导航栏 + 中间可滚动内容 + 底部工具栏”，三者都可见，仅中间部分能上下滚动。这时不要只靠 overflow，而是用 display: flex 配合 flex: 1 控制伸缩行为。
关键点：
立即学习“前端免费学习笔记（深入）”；
-
html, body必须设height: 100%，否则flex高度计算失效 - 外层容器用
flex-direction: column，让子元素纵向排列 - 头尾用固定高度（如
height: 60px），中间区域用flex: 1占满剩余空间，并单独加overflow-y: auto - 避免给中间区域设
height: 100%—— 它会试图占满整个视口，覆盖头尾
scrollIntoView() 滚动到局部容器内的目标元素
当用户点击一个链接，想让局部容器内某 id="section-2" 的元素滚动进视口，不能直接用锚点跳转（那会触发主页面滚动）。必须显式调用 element.scrollIntoView()，并确保作用对象是局部容器，不是 window 或 document。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
典型写法：
const container = document.querySelector('.scroll-container');
const target = document.getElementById('section-2');
container.scrollTo({
top: target.offsetTop - container.offsetTop,
behavior: 'smooth'
});
或者更稳妥地用 scrollIntoView 配合容器的 scrollIntoViewOptions：
- 先确保
target是container的后代节点 - 调用
target.scrollIntoView({ block: 'nearest', behavior: 'smooth' })，但前提是container已设scroll-behavior: smooth，否则平滑无效 - 若
scrollIntoView滚错了位置（比如偏移不准），大概率是container的padding或border影响了offsetTop计算，改用getBoundingClientRect()更可靠
阻止锚点链接触发全局滚动
如果页面里已有 <a href="#section-2"></a> 这类锚点链接，点击后默认会让整个页面滚动到 #section-2，这会破坏局部滚动体验。必须拦截默认行为。
做法很简单：
- 监听所有
a[href^="#"]的点击事件 - 用
event.preventDefault()阻止默认跳转 - 手动提取
href中的 ID（如event.target.hash.slice(1)） - 查到对应元素后，在局部容器内执行滚动（见上一节）
- 特别注意：别忘了给局部容器加
id或 class，否则无法区分该响应哪个容器
最容易被忽略的是滚动容器的 scroll-behavior: smooth 没配——即使 JS 调用了 behavior: 'smooth'，如果容器本身不支持，最终还是硬跳。这个样式必须显式加在容器上，不能只靠 html 或 body 的全局设置。
