局部滚动容器需设固定宽高且内容溢出才生效；用getBoundingClientRect()计算偏移更准确；锚点链接需禁用默认行为并手动scrollTo；Safari中smooth滚动受限，建议降级或自实现。
局部滚动容器必须设固定尺寸和 overflow
没有宽高限制的 div 默认撑满父容器，overflow 不会触发滚动条。局部滚动的前提是：容器有明确的 width 和 height（或 max-height），且内容实际高度超出该限制。
常见错误是只写 overflow-y: auto 却忘了设 height，结果容器无限拉伸，滚动失效。正确写法示例：
.scroll-container {
width: 300px;
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
注意：overflow: auto 只在内容溢出时才显示滚动条；overflow: scroll 强制显示（含空滚动条），适合 UI 一致性要求高的场景。
滚动容器内元素定位不准？别用 offsetTop 算坐标
对局部容器调用 scrollTo 时，目标元素的偏移量不是 target.offsetTop —— 这个值只相对于最近的定位祖先，不考虑 padding、border、transform 或嵌套滚动上下文。
更可靠的方式是用 getBoundingClientRect() 做相对计算：
const container = document.querySelector('.scroll-container');
const target = document.querySelector('#item-3');
const containerRect = container.getBoundingClientRect();
const targetRect = target.getBoundingClientRect();
const offsetTop = targetRect.top - containerRect.top + container.scrollTop;
<p>container.scrollTo({ top: offsetTop, behavior: 'smooth' });</p>
如果容器有 padding-top: 10px，上面计算已自动包含，无需额外加减。
局部滚动里点锚点链接，为什么整个页面跳了？
HTML 锚点链接（如 <a href="#item-5"></a>）默认作用于整个文档，不会识别你写的局部容器。点击后浏览器仍会滚动 document，导致页面乱跳。
解决方法只有两个：
- 禁用原生锚点行为：
event.preventDefault()，再手动调用容器的scrollTo - 改用 JS 触发：把链接换成按钮，绑定 click 后查到目标元素并滚动
不要试图给局部容器加 id 并在 href 里写 #scroll-container #item-5 —— 浏览器不解析这种 CSS 选择器式锚点，会静默失败。
Safari 里局部滚动卡顿或不平滑？检查 scroll-behavior 和 transform
behavior: 'smooth' 在 Safari ≤ 15.4 对局部容器支持极差，常表现为瞬时跳转或完全无动画。这不是代码错，是浏览器限制。
临时对策：
- 降级为
behavior: 'auto'，至少保证功能可用 - 避免在滚动容器或其子元素上使用
transform（如translateZ(0)或scale(1)），这会触发 Safari 的合成层异常，直接禁用 smooth 滚动 - 确认容器没设
contain: paint或will-change: transform，这些也会干扰滚动行为
真正稳定的局部平滑滚动，在 Safari 上仍建议搭配 IntersectionObserver + requestAnimationFrame 自行实现缓动逻辑，而不是依赖原生 behavior。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
