局部滚动容器必须同时设置显式高度（如height）和overflow（如overflow-y: auto），否则无法创建滚动上下文；需用event.preventDefault()拦截锚点默认跳转，并通过container.scrollTo或手动计算scrollTop实现局部平滑滚动。
局部滚动容器必须设置 overflow 和高度
不加 overflow: auto 或 overflow: scroll，再怎么写 JS 也滚不起来——浏览器根本不会为该元素创建滚动上下文。同时，必须显式设置 height（或 max-height），否则容器会撑满内容高度，没有滚动余地。
常见错误现象：.scroll-container 写了 scroll-behavior: smooth 却没反应；点击锚点后主页面跳了，局部容器纹丝不动。
- ✅ 正确写法：
.scroll-container { height: 400px; overflow-y: auto; scroll-behavior: smooth; } - ❌ 错误组合：只设
overflow-y: auto但没设高度；或设了min-height而非固定高度 - ⚠️ 注意：Flex 容器中，若父级用
flex: 1，子容器仍需自身有明确高度约束，否则overflow可能失效
锚点链接默认行为必须显式阻止
HTML 中 <a href="#section-id"> 点击时，浏览器会自动触发全局滚动，哪怕目标元素在局部容器内。不拦截，就永远无法真正“局部”。
关键不是“怎么滚”，而是“先别让浏览器乱滚”。event.preventDefault() 是必选项，漏掉它，后续所有 JS 滚动逻辑都白搭。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 监听范围建议用事件委托：
document.addEventListener('click', handleAnchorClick)，避免漏掉动态插入的链接 - 判断是否为局部锚点：检查
href是否以#开头，且目标元素是否在指定容器内（如container.contains(targetEl)） - 不要只靠
href匹配 ID——有些链接可能是#section-id?tab=2，需用new URL(href).hash提取干净 hash 值
scrollIntoView 对局部容器生效的前提是调用对象正确
element.scrollIntoView() 默认作用于最近的可滚动祖先，但这个“祖先”不一定是你要控制的那个容器——它可能向上找到 body 或 html，又把主页面带跑了。
必须显式指定滚动容器，并调用其 scrollIntoView()，或者手动计算偏移 + scrollTop。前者更简洁，后者更可控。
- ✅ 推荐方式（现代浏览器）：
container.scrollTo({ top: targetEl.offsetTop - container.offsetTop, behavior: 'smooth' }) - ✅ 更健壮方式（兼容老环境）：
container.scrollTop = targetEl.offsetTop - container.offsetTop，再配合requestAnimationFrame实现平滑 - ❌ 错误调用：
targetEl.scrollIntoView({ behavior: 'smooth' })—— 没指定block或容器，极易失控 - ⚠️ 注意：
offsetTop是相对最近定位祖先的值，若容器本身是position: relative，计算才可靠；否则需用getBoundingClientRect()配合container.getBoundingClientRect().top手动算差值
scroll-behavior: smooth 在局部容器中需单独启用
全局设 html { scroll-behavior: smooth } 不会让局部容器变平滑——每个可滚动元素的 scroll-behavior 是独立的，必须单独声明。
而且，这个 CSS 属性只影响由用户交互（如点击锚点）或 JS API（如 scrollTo、scrollIntoView）触发的滚动，不影响直接赋值 scrollTop。
- ✅ 必须写：
.local-scroll { scroll-behavior: smooth; }，不能省略 - ⚠️ 兼容性坑：Safari 15.4+ 才完整支持局部容器的
scroll-behavior: smooth，旧版 Safari 下 JS 平滑滚动仍是刚需 - ? 小技巧：如果局部容器里嵌套了另一个可滚动子容器，子容器的
scroll-behavior也会生效，但父子滚动行为互不干扰
局部滚动真正难的不是“怎么让它动”，而是“怎么确保它只在自己的边界里动”——每一步都要主动切断浏览器默认链路，从 CSS 约束、事件拦截到 JS 调用对象，缺一不可。最容易被忽略的是容器自身的 position 上下文和 scroll-behavior 的作用域粒度。
