实现局部滚动需容器设固定高度（如px/vh/rem）并设置overflow-y: auto；Flex子项需加flex-shrink: 0防塌陷；平滑滚动用scroll-behavior: smooth（作用于容器本身）；JS控制时用container.scrollTo()并校验target是否在容器内。
给容器设固定高度 + overflow-y: auto
局部滚动的前提是让某个 <div> 自己滚，而不是拖动整个页面。关键就两条：容器必须有明确的 height（或 max-height），且 CSS 设置 overflow-y: auto（或 scroll）。只写 overflow: auto 也行，但容易误触水平滚动；显式写 overflow-y 更稳妥。
常见错误现象：scrollTop 始终为 0、滚动条不出现、点击后内容“闪一下”就回弹——基本都是因为容器没设高度，或者父元素用了 display: flex 但没配 flex-shrink: 0 导致高度塌陷。
- 高度单位推荐用
px、vh或rem，避免用%（除非父级高度明确） - 如果容器是 Flex 子项，加一句
flex-shrink: 0防止被压缩到无高度 - 不要依赖
overflow: hidden来“隐藏多余”，它会直接禁掉滚动能力
用 scroll-behavior: smooth 开启平滑滚动
默认滚动是瞬跳的，加一行 CSS 就能让它丝滑：对滚动容器本身设置 scroll-behavior: smooth。注意不是设在 html 或 body 上——那会影响全页，而你要的是局部。
兼容性要注意：IE 完全不支持；iOS Safari 15.4 之前有 bug，scrollIntoView({ behavior: 'smooth' }) 在局部容器里可能失效，此时得降级用 JS 动画模拟。
立即学习“前端免费学习笔记（深入）”；
- 生效前提是该元素确实可滚动（即已满足上一条的高度 + overflow 条件）
- 若滚动后立刻被 JS 覆盖（比如重置
scrollTop），平滑效果会被打断 - 用户开启系统级“减少运动”偏好（
prefers-reduced-motion: reduce）时，该属性自动失效，这是正确行为，不用强行绕过
用 JavaScript 控制局部滚动位置（如锚点跳转）
当点击一个链接要滚到容器内某个 id 元素时，浏览器默认会滚整个页面。必须拦截并重定向到局部容器。核心是：阻止默认行为 + 计算目标在容器内的偏移 + 调用 container.scrollTo()。
别用 element.scrollIntoView() 直接调——它默认作用于根视口，除非你显式传入 { block: 'start', inline: 'nearest', behavior: 'smooth' } 并确保调用对象是那个局部容器。
- 获取目标元素在容器内的相对位置：
target.offsetTop - container.offsetTop（简单场景），更健壮用target.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop - 滚动时记得加
{ behavior: 'smooth' }，否则 fallback 到瞬跳 - 务必检查
container.contains(target)，防止目标不在该容器内却强行滚动，导致错位
滚动按钮怎么写才不翻车
用按钮控制局部上下滚动，最安全是操作 container.scrollTop，而不是 window.scrollBy()——后者永远滚整个页面。
边界判断不能只看 scrollTop === 0 或 scrollTop >= scrollHeight - clientHeight，因为存在 subpixel 渲染、缩放、字体加载导致布局重排等情况，实际值可能带小数。建议用容差判断，比如 scrollTop 视为顶部。
- 向上按钮逻辑：
container.scrollTop = Math.max(0, container.scrollTop - step) - 向下按钮逻辑：
container.scrollTop = Math.min(container.scrollHeight - container.clientHeight, container.scrollTop + step) - 按钮禁用状态应实时响应
scroll事件，但别频繁重算——用requestAnimationFrame节流 - 移动端 iOS 上，
scrollTop可能异步更新，读取后立刻写入有时会丢帧，加个setTimeout(..., 0)微任务兜底
局部滚动真正难的不是“让它动起来”，而是滚动容器嵌套时的 scrollTop 传递、iOS Safari 的 scroll event 不触发、以及用户缩放页面后坐标计算失准——这些细节没处理好，滚动就会卡顿、跳变或失效。
