最直接有效的方式是用css flex布局配合overflow: auto：html和body设height: 100%、margin/padding: 0，body设display: flex、flex-direction: column；header/footer用height或flex-shrink: 0；main设flex: 1且overflow: auto。
如何让只有 main 区域可滚动，头尾固定
最直接有效的方式是用 CSS Flex 布局配合 overflow: auto。关键不是“禁掉”其他区域的滚动，而是让 main 成为唯一具备滚动能力的弹性子项。
常见错误是只给 main 加 overflow-y: auto，却没限制父容器高度或未设 flex: 1 —— 这会导致 main 高度撑开整个页面，滚动条依然出现在 body 上。
-
html和body必须设height: 100%，且margin/padding: 0 -
body设display: flex; flex-direction: column -
header、footer用固定高度（如height: 60px）或flex-shrink: 0 -
main必须设flex: 1且overflow: auto（不能只写overflow-y）
这样浏览器会把剩余空间全部分配给 main，它超出部分才触发自身滚动条，body 永远不会出现滚动。
scroll-behavior: smooth 在局部容器中是否生效
生效，但必须作用在**滚动容器本身**上，而不是 html 或 body。
例如你有一个 <div class="scroll-container">，里面内容超长且设置了 <code>overflow-y: auto，那么平滑滚动要这样写：
.scroll-container {
height: 400px;
overflow-y: auto;
scroll-behavior: smooth;
}
如果只在 html 上设 scroll-behavior: smooth，点击该容器内的锚点链接，滚动仍会作用于整个页面，和你想控制的局部容器无关。
注意：Safari 对局部容器的 scroll-behavior 支持较晚（iOS 16.4+ / macOS 13.3+），旧版本需 fallback 到 JS 的 scrollIntoView({ behavior: 'smooth' }) 或 scrollTo()。
点击锚点时主页面跳动，怎么只滚局部容器
根本原因是浏览器默认把 href="#id" 解析为全局跳转，会强制 body 滚动到目标元素可见位置。要阻止它，必须拦截事件并手动控制局部滚动。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 监听所有
a[href^="#"]点击，调用event.preventDefault() - 用
document.getElementById(href.slice(1))找到目标元素 - 确认该元素是否在某个局部滚动容器内（比如
closest(".scroll-container")） - 调用容器的
scrollIntoView({ block: 'start', behavior: 'smooth' })，或更精确地算偏移量后设scrollTop
容易漏的一点：目标元素可能不在视口内，但它的父容器不是滚动容器——这时 scrollIntoView 会退回到 body，导致又跳了。务必先做容器存在性判断。
为什么 scrollIntoView 有时滚不到预期位置
因为 scrollIntoView 默认作用于最近的可滚动祖先，而这个“最近祖先”不一定是你期望的那个容器。
比如结构是：<div class="outer"><div class="inner"><div id="target"></div></div></div>，其中只有 .inner 有 overflow: auto，但如果你在 #target 上直接调 scrollIntoView()，它可能向上查到 .outer（如果它也意外可滚动）甚至 body。
稳妥做法是显式指定滚动容器：
const container = document.querySelector('.scroll-container');
const target = document.getElementById('target');
container.scrollTop = target.offsetTop - container.offsetTop;
或者用 target.scrollIntoView({ block: 'start', inline: 'nearest' }) 前，先确保 target.offsetParent === container，否则加一层 container.scrollTo() 控制。
真正难处理的是嵌套滚动 + 相对定位 + transform 共存的情况——此时 offsetTop 失效，得用 getBoundingClientRect() 和 container.getBoundingClientRect() 手动算差值。
