局部锚点点击导致主页面滚动是浏览器默认行为，需用javascript拦截a标签点击事件并调用container.scrollto()实现局部滚动；滚动穿透应通过body overflow:hidden配合overscroll-behavior:contain解决，而非仅依赖事件阻止。
局部滚动容器里点锚点，主页面还跟着滚？
这不是 bug，是浏览器默认行为：点击 href="#id" 时，它会把目标元素滚动进「视口」，而这个视口默认是整个页面（document.documentElement 或 document.body），不是你写的那个 .left-container。所以哪怕你给容器加了 overflow: auto，只要没拦截，默认就滚主页面。
关键不是“怎么让容器滚”，而是“怎么阻止它去滚别的地方”。纯 CSS 搞不定，必须用 JS 拦截 + 手动 scrollTo。
- 监听所有
a[href^="#"]点击，e.preventDefault()干掉默认跳转 - 拿到
href值（比如"#card-3"），用document.querySelector()找到对应元素 - 确认该元素是否在你的局部容器内（
container.contains(target)），避免误操作其他区域 - 调用
container.scrollTo()，传入{ top: target.offsetTop - container.offsetTop, behavior: "smooth" }
移动端弹窗一滑，底下列表跟着动？
这是典型的滚动穿透，根源不在事件冒泡，而在「滚动链（scroll chaining）」：当局部容器（比如弹窗内容区）滚到顶/底后继续滑，剩余手势会自动传给上层可滚动容器——也就是你没锁住的 body。
最稳的解法不是堵事件，而是切断滚动上下文：
- 弹窗打开时，设
document.body.style.overflow = "hidden"（注意：不是html，iOS 对html的 overflow 支持不一致） - 同时加
overscroll-behavior: contain到弹窗容器和局部滚动区（如.modal-content），这能直接禁用滚动链，Chrome / Safari / Firefox 都支持 - 别只靠
touchmove.preventDefault()—— modern 浏览器默认 passive，{ passive: false }会牺牲滚动流畅性，且 iOS WKWebView 下可能失效
局部容器自己滚着滚着，突然把整个页面带偏了？
常见于容器用了 position: sticky、transform 或嵌套了 iframe，导致浏览器无法正确识别滚动边界。此时 scrollTo() 计算偏移量会出错，target.offsetTop 返回的是相对于最近定位祖先的值，不是相对于容器本身的。
安全做法是用 getBoundingClientRect() 和 container.getBoundingClientRect() 做差值：
const rect = target.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
container.scrollTo({
top: container.scrollTop + rect.top - containerRect.top,
behavior: "smooth"
});
这样绕过 DOM 层级干扰，也不依赖父级定位方式。如果容器有 padding 或 border，记得用 container.clientTop 和 container.clientLeft 补偿。
为什么加了 overflow: hidden 还穿？
因为很多人写成了 html, body { overflow: hidden; } 或只加在 body 上但没清内联样式。iOS Safari 特别挑：它对 html 的 overflow 处理异常，且如果页面有 viewport 缩放、height: 100vh 或 flex: 1 布局，body 可能根本没形成滚动上下文，隐藏无效。
实操建议：
- 只操作
document.body.style.overflow，开弹窗时赋"hidden"，关时赋空字符串""（不是"auto"，避免覆盖用户原有 CSS） - 配合
document.body.style.position = "fixed"+top偏移保存滚动位置（需记录window.scrollY），但仅在必须保位置时用——多数场景直接锁overflow更轻量 - 真机测试务必用 Safari 实机，模拟器和 Chrome DevTools 的 touch 模拟常漏掉滚动链行为
真正难的不是“怎么停”，而是“在哪停”——局部滚动区域的边界是否被 CSS 清晰定义、是否被 transform 或 fixed 打断、是否有 iframe 插入，这些都会让浏览器对“谁该滚”产生歧义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
