固定区域滚动需明确尺寸约束（如max-height）、启用overflow-y: auto实现按需滚动，隔离布局防干扰，移动端须加-webkit-overflow-scrolling: touch以恢复惯性滚动。
固定区域滚动不是给整个页面加 overflow，而是让某个容器自己滚、其他部分不动——关键在尺寸约束 + 溢出控制 + 布局隔离。
给容器设固定高度并启用 overflow-y: auto
这是最常见也最容易出错的一步。很多开发者直接写 height: 200px; overflow: scroll，结果滚动条永远显示、内容少时还留白。
-
height是刚性限制，内容不足时会空出大片区域；改用max-height更合理，它只在内容撑高时才触发滚动 -
overflow: scroll强制显示滚动条，干扰视觉；overflow: auto才是“需要时才出现”的正确选择 - 容器必须有明确的块级上下文：避免父元素用了
float或display: inline，否则高度计算可能失效 - 如果容器是 Flex 子项，需确认父容器没设
align-items: stretch以外的值，否则高度可能被拉伸或压缩
防止页面整体滚动干扰区域滚动
当你要实现“只有中间区域可滚，头尾固定”这类布局时，body 的默认滚动会和区域滚动打架——比如滚动到顶部后继续拖，整个页面跟着动。
- 典型做法是给
body加overflow: hidden，再把滚动行为完全交给目标容器 - 但要注意：移动端 Safari 对
overflow: hidden在body上的支持不稳定，更稳妥的是作用于html+body并配合position: fixed容器 - 如果用
position: fixed固定头部/侧边栏，记得给它们加z-index，否则可能被滚动内容遮盖 - 别忘了给主内容区预留空间：比如头部高 60px，就用
margin-top: 60px或padding-top: 60px避免重叠
移动端惯性滚动失效怎么办
iOS Safari 默认禁用内部容器的惯性滚动（即拖完松手不继续滑），体验断层明显。
立即学习“前端免费学习笔记（深入）”；
- 必须加
-webkit-overflow-scrolling: touch到滚动容器上，仅 Safari 有效 - 该属性已废弃但仍是目前唯一可靠方案；Chrome 和 Firefox 不识别，也不影响
- 它要求容器是独立层叠上下文（如含
transform、will-change或z-index），否则可能不生效 - 注意副作用：开启后可能引发某些动画卡顿，若遇到可尝试加
will-change: scroll-position优化
自定义滚动条样式只在 WebKit 内核生效
想改滚动条颜色、宽度或隐藏轨道？::-webkit-scrollbar 系列伪类是唯一途径，但它只对 Chrome、Edge、Safari 有效。
- Firefox 使用
scrollbar-width和scrollbar-color（仅支持 thin/dark/light 三档粗细） - 无法通过 CSS 彻底隐藏滚动条又保留滚动功能——
overflow: overlay已被移除，overflow: auto+scrollbar-width: none仅 Firefox 支持且有兼容限制 - 如果设计要求“无滚动条但可滚”，只能靠 JS 模拟（如监听
mousewheel+scrollTop），但会牺牲原生性能和可访问性 - 真要隐藏，至少保留
::-webkit-scrollbar { width: 0 }，不然 Safari 下仍会占位
真正难的不是加滚动，而是让滚动只发生在该发生的地方、不带副作用、不破坏其他交互——尤其是移动端的惯性、缩放、键盘弹起联动，这些细节一旦漏掉，用户第一反应就是“这页面卡”。
