局部滚动容器需设明确height/max-height且overflow-y有效；transform等会干扰坐标，应使用getBoundingClientRect计算；scrollBy更可靠，滚动监听须用requestAnimationFrame节流。
局部滚动容器必须有明确高度和 overflow-y
没有固定高度的 div 即使写了 overflow-y: auto，scrollTop 也始终为 0，滚动根本不会触发。浏览器只对“有明确可视区域边界”的容器启用滚动上下文。
必须用 height 或 max-height，不能靠 min-height 或内容撑开；overflow-y: scroll 强制显示滚动条（避免 Safari 下偶发不触发事件），auto 更稳妥但首次加载后可能需重排才出现。
- 父级若含
transform、perspective或filter，会创建新层叠上下文，导致offsetTop失准 - 此时应改用
getBoundingClientRect().top - container.getBoundingClientRect().top
用 scrollIntoView() 实现容器内锚点跳转要手动绑定
原生 <a href="#section1"></a> 会触发整页滚动，不是局部。想在容器内跳转，得禁用默认行为 + 主动调用 scrollIntoView()。
先获取目标元素，再调用其父容器的 scrollIntoView() —— 不行，scrollIntoView() 只作用于 document 根上下文。正确做法是：获取目标元素在容器内的相对位置，再设置容器的 scrollTop。
立即学习“前端免费学习笔记（深入）”；
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 用
target.offsetTop - container.offsetTop计算偏移（仅当两者同级且无 transform） - 更稳的是：
target.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop - 赋值前务必检查
container.scrollHeight > container.clientHeight，否则滚动无效
scrollBy() 比直接设 scrollTop 更适合按钮驱动滚动
手动维护 scrollTop 容易在异步渲染、重排或连点时出错；scrollBy() 是相对位移，不依赖初始状态，天然适配“点一下滚一段”的交互。
现代浏览器已支持容器上的 scrollBy()（无需 polyfill）：
const container = document.getElementById('list-container');
container.scrollBy({ top: 40, behavior: 'smooth' });
- Safari 15.4 以下不支持
behavior: 'smooth'，可降级为{ top: 40 } - 向上/向下禁用逻辑不能只判断
scrollTop === 0或=== max，高 DPI、缩放、iframe 下值可能是小数 - 应写成：
container.scrollTop （到顶）、<code>container.scrollTop > container.scrollHeight - container.clientHeight - 0.5（到底）
滚动监听必须节流且避开 layout 触发
局部容器滚动比 window 更容易高频触发，尤其手滑惯性滚动。不节流的话，scrollTop 还没读完，下一次回调又来了。
每次读取 scrollTop 都会强制同步触发 layout，连续滚动时极易掉帧。长列表中实时计算位置，卡顿明显。
- 改用
IntersectionObserver监听目标项是否进入视口，完全规避 layout 强制刷新 - 如必须响应滚动位置，用
getBoundingClientRect()替代scrollTop + offsetTop计算 - 节流推荐
requestAnimationFrame，不是setTimeout或debounce—— 它能对齐屏幕刷新节奏
滚动定位的真正难点不在 API 调用，而在容器尺寸是否真实生效、坐标计算是否受 transform 干扰、以及节流时机是否避开 layout 强制刷新。这三个环节任一出错，都会表现为“点了没反应”或“滚过了头”。
