div局部滚动需设固定高度+overflow-y: auto，否则无效；flex布局下须防flex-shrink压缩高度；js控制需计算容器内偏移；隐藏滚动条仅用::-webkit-scrollbar。
div局部滚动必须设固定高度 + overflow-y
不设高度的div加overflow-y: auto等于白写——scrollTop永远是0，滚动条也不出现。浏览器只对“有明确可视边界”的容器启用滚动上下文。
必须同时满足：
• 容器有height或max-height（推荐用px、vh或rem）
• 显式设置overflow-y: auto（别只写overflow: auto，水平溢出可能误触发）
• 内容实际高度超过容器高度（否则没得滚）
常见翻车点：
• 父级是display: flex但没给滚动容器加flex-shrink: 0，导致高度被压缩归零
• 用min-height代替height，它不创建滚动上下文
• 子项用了display: contents或visibility: hidden，影响高度计算
Flex布局下局部滚动突然失效怎么办
Flex子项默认会收缩（flex-shrink: 1），这是局部滚动最常崩的原因。滚动容器若在Flex父容器里，大概率被压扁到没高度。
修复关键点：
• 滚动容器的**直接父级**要加overflow: hidden或明确高度（如height: 400px）
• 滚动容器自身设flex-shrink: 0（或flex: 0 0 auto）
• 若父级是flex-direction: column，该子项还得加align-self: stretch或显式height
别信height: 100%——Flex里它常失效；改用max-height: 100%并确保父级有overflow: hidden才靠谱。
如何用JavaScript控制局部滚动位置
点击锚点时浏览器默认滚整个页面，必须拦截并重定向到目标容器。直接调element.scrollIntoView()大概率错位，因为它作用于根视口。
正确做法：
• 先获取滚动容器：const container = document.querySelector('.scroll-container')
• 检查目标是否在容器内：if (!container.contains(target)) return
• 计算相对偏移：const offset = target.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop
• 调用container.scrollTo({ top: offset, behavior: 'smooth' })
注意：
• behavior: 'smooth'在Safari 15.4+才完全支持局部容器，旧版需降级为'auto'
• 用户开启系统“减少运动”偏好时，该行为自动禁用，这是预期行为，别硬绕
隐藏原生滚动条但保留滚动功能
设计要求隐藏滚动条时，千万别删overflow-y: auto——那会直接废掉滚动能力。
安全做法：
• WebKit内核（Chrome/Safari/Edge）：加::-webkit-scrollbar { display: none; }
• Firefox无需额外处理，触屏滑动仍可用
• 如需彻底遮挡（比如防iOS悬停闪现），可加padding-bottom: 0或margin-bottom: -16px，但会影响可访问性，慎用
横向滚动同理，overflow-x: auto必须保留，::-webkit-scrollbar只管视觉隐藏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
