body { overflow: hidden }在真机上基本无效，是因为ios webkit和部分安卓webview不拦截body的touch滚动事件，仅控制渲染不干预事件流；真正生效需用html+body双fixed锁定视口、overscroll-behavior设在可滚动子元素上，并js精准拦截非可滚动区touchmove。
为什么body { overflow: hidden }在真机上基本没用
这不是你漏写了样式，是 iOS WebKit 和部分安卓 WebView（比如旧版 UC、QQ）压根不拦截 body 上的 touch 滚动事件。overflow: hidden 只管渲染层是否显示滚动条，不管手指一滑触发的默认滚动行为——背景页照样惯性滚动。尤其键盘弹出、地址栏收起时，它还会被浏览器强制重置。
用 html + body 双 fixed 锁定视口才真正生效
核心不是“禁滚动”，而是让滚动容器物理失效。必须同时控制 html 和 body，顺序不能错：
- 弹窗前先记位置：
const scrollY = window.pageYOffset（别用document.body.scrollTop，iOS Safari 里它常为 0） - 给
html加内联样式：style="position: fixed; width: 100%; top: -${scrollY}px"——这才是钉住视口的关键 - 再设
body { overflow: hidden }，防键盘顶起内容导致布局错乱 - 关闭时：先清空
html.style.position和body.style.overflow，再用requestAnimationFrame(() => window.scrollTo(0, scrollY))回位
overscroll-behavior: contain 必须加在可滚动子元素上
这个属性不是写在弹窗根节点上就起作用的。它只对「实际可滚动」的容器生效：
- 找到弹窗内部真正要滚动的区域，比如
.modal__content - 确保它有明确高度 +
overflow-y: auto（或scroll） - 加上：
.modal__content { overscroll-behavior: contain; } - 如果连弹性回弹都要禁（如防止干扰表单），才用
none；但contain更安全，兼容性也更好（iOS 16.4+、Chrome 63+）
JS 补漏必须精准判断触摸点，不能全局拦截
直接给 document 或 body 绑 touchmove 并 e.preventDefault() 是最常见错误——弹窗里的 textarea、轮播图、长列表全会卡死。
- 监听弹窗根节点（如
.modal）的touchmove，注册时带{ passive: false } - 用
e.target.closest('.scrollable')判断是否落在可滚动区（提前给该区域加 class） - 仅当不在可滚动区内才调
e.preventDefault()；在就放行 - 弹窗关闭时务必调
removeEventListener，否则监听残留造成内存泄漏
最易被忽略的是：iOS 键盘唤起时的“闪动”不是 CSS 能修的，它由浏览器主动滚动触发；唯一可靠解法是输入框获得焦点后立即调用 element.scrollIntoView({ block: 'nearest' })，并搭配 setTimeout 防止冲突。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
