只设 body { overflow: hidden } 在移动端失效，因 iOS WebKit 忽略 body 滚动控制、软键盘强制滚动、地址栏重算视口及安卓 WebView 兼容性差；需配合 html 固定定位、JS 控制 scrollTop 与 overscroll-behavior 设于实际可滚动子元素。
为什么只设 body { overflow: hidden } 会失效
这个写法在 PC 浏览器里基本管用，但在移动端是“纸面封禁”：iOS WebKit 会忽略 body 的 overflow，转而响应 html 的滚动容器行为；软键盘唤起时，浏览器强制把聚焦元素滚进可视区，overflow: hidden 完全挡不住；地址栏自动收起/展开会触发视口重算，body 的固定样式被重置；部分安卓 WebView（如旧版 UC、QQ 浏览器）对 body 的 overflow 支持不一致。
overscroll-behavior 必须设在可滚动子容器上
常见错误是把 overscroll-behavior: contain 写在弹窗 wrapper（比如 .modal）上——它本身不可滚动，属性直接被忽略。真正生效的位置是内部实际可滚动的区域，例如：
-
.modal__content、.chat-list、.sidebar-menu等有明确高度限制（如max-height: 80vh）且设置了overflow-y: auto的元素 - 该区域内容必须真实超出高度，否则浏览器不会触发 overscroll 行为，属性无效
- 推荐值：
overscroll-behavior: contain（保留视觉回弹），慎用none（会干掉 iOS 下拉刷新提示）
弹窗打开时必须同时控制 html 和 body
仅靠 CSS 不够，JS 配合必不可少。三步缺一不可，顺序不能错：
- 弹窗打开前，先存
const scrollTop = window.scrollY - 给
html加内联样式：style="position: fixed; width: 100%; top: -${scrollTop}px"——这才是真正“钉住”视口的关键 - 再设
body { overflow: hidden }，防键盘顶起内容导致布局错乱 - 关闭时，先恢复
html.style.position和body.style.overflow，再用window.scrollTo(0, scrollTop)回位，且务必包一层requestAnimationFrame
别全局拦截 touchmove，否则弹窗内滚动也卡死
监听 document 并无差别调用 e.preventDefault()，等于给整个页面装了刹车片：
立即学习“前端免费学习笔记（深入）”；
- 弹窗内的轮播图、可滚动列表、输入框光标拖动，全都会失效
- 正确做法：只拦截非弹窗区域，例如
if (!e.target.closest('.modal-overlay')) e.preventDefault() - 注册事件时必须带
{ passive: false }，否则 Safari 直接忽略preventDefault - 弹窗关闭时必须调用
removeEventListener，否则监听残留造成内存泄漏
element.scrollIntoView({ block: 'nearest' })，并搭配 setTimeout(() => window.scrollTo(0, scrollTop), 100) 强制回位。 
