局部滚动时页面仍可全局滚动，是因为html和body默认允许溢出滚动；需同时设置html、body{height:100%;overflow-x:hidden;overflow-y:hidden}禁用全局滚动，并确保局部容器有明确高度和overflow-y:auto。
局部滚动容器启用后，整个页面仍可上下滚动，说明全局滚动没被禁用——这不是局部滚动写错了，而是 html 和 body 仍默认允许溢出滚动。
为什么局部滚动时页面还在动
浏览器默认让 html 元素作为根滚动容器。哪怕你给某个 <div class="chat"> 设了 overflow-y: auto，只要它的内容没撑满视口，html 就仍会响应鼠标滚轮或触摸板滑动，导致整页跟着动。
常见错误现象包括：侧边栏能滚，但一划屏幕底部就往上蹿；卡片内容区有滚动条，却同时出现页面级滚动条；移动端手指一滑，先滚局部再滚全局，体验割裂。
- 检查
html, body是否设置了overflow-y: hidden - 确认局部容器父级没有
height: 100%但没配overflow: hidden，否则 flex/grid 布局下高度塌陷，间接放行全局滚动 - Bootstrap 或 Tailwind 等框架可能自带
min-height: 100vh，需额外加overflow: hidden才生效
禁用全局滚动的 CSS 写法
最直接有效的做法是切断 html 和 body 的滚动能力，把滚动权完全交给目标容器。
立即学习“前端免费学习笔记（深入）”；
必须同时设置三者：
html,
body {
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
}注意：height: 100% 不可省略，否则 overflow: hidden 在部分 Safari 版本中失效；overflow-x 也得显式设，防止横向内容意外触发滚动。
- 若页面需支持横屏（如报表类应用），可改用
overflow-y: hidden单独控制垂直方向 - 使用
vh单位时，避免写height: 100vh在body上——iOS Safari 中键盘弹出会压缩vh，造成布局跳变 - 禁用后，所有 JS 滚动 API（如
window.scrollTo）将不再起效，只能操作局部容器的scrollTop或scrollTo
局部容器自身必须满足可滚动条件
即使全局滚动已关，局部容器仍不滚动，大概率是它没真正“具备滚动资格”。
两个硬性条件缺一不可：
- 容器必须有明确的、非
auto的高度约束（如height: 400px、max-height: 60vh、flex: 0 0 400px） - CSS 必须显式声明
overflow-y: auto（仅写overflow: auto可能因内容宽度触发水平滚动）
Flex 布局下尤其容易翻车：如果滚动容器是 flex-direction: column 的子项，且没设 flex-shrink: 0 或 height，它会被压缩到内容高度，overflow 失效。
示例修复：
.sidebar {
flex: 0 0 320px; /* 关键：禁止收缩 */
overflow-y: auto;
}移动端 touchmove 不能干预滚动逻辑
有人为了“更可控”，在局部容器上监听 touchmove 并调用 preventDefault()，这反而会阻断浏览器原生滚动管线，导致卡顿、丢帧甚至无法滚动。
正确做法只有一条：让浏览器自己处理滚动，JS 仅做状态同步。
- 不要在
touchmove里改scrollTop、transform或任何触发布局的样式 - 需要吸顶/懒加载等效果，用
scroll事件 +requestIdleCallback或IntersectionObserver替代高频计算 - 若容器内含 iframe 或第三方组件，它们可能自带滚动拦截逻辑，此时需检查其文档是否提供禁用选项
真正难搞的不是怎么“锁住页面”，而是当局部容器高度动态变化（比如消息流不断追加）、又得保持滚动位置、还得兼容 Safari 的 layout thrashing 时，requestAnimationFrame 的时机和 localStorage 存取的键名隔离，往往比写第一行 CSS 更耗神。
