应同时设置 html 和 body { overflow: hidden; height: 100% }，ios 还需配合 body { position: fixed; top: 0; left: 0; width: 100% } 并记录/恢复 scrolltop，单设 body 无效且 overscroll-behavior 不适用。
如何用CSS阻止页面整体滚动
网页禁止全屏滚动，本质是禁用 body 和 html 元素的滚动行为，不是靠 JavaScript 监听 scroll 事件去“拦截”——那样既不彻底（如触摸惯性滚动、快捷键 Space 或 PageDown 仍有效），又容易漏掉 overflow 的继承链问题。
正确做法是直接切断滚动能力：
- 给
html和body同时设置overflow: hidden，缺一不可；html控制根视口，body是默认滚动容器，二者都得锁死 - 避免只设
body { overflow: hidden }—— 在部分 iOS Safari 中，html仍可滚动，尤其当body高度不足时 - 如果页面已有滚动内容（如弹窗内列表），需在对应局部容器上显式恢复
overflow-y: auto，否则内部也无法滚动
JavaScript 动态启用/禁用滚动时的常见陷阱
很多场景需要“临时禁用滚动”，比如打开模态框（Modal）时防止背景滚动。这时不能只靠 CSS 切换，必须配合 position: fixed 修复 iOS 滚动偏移问题。
典型错误写法：document.body.style.overflow = 'hidden' —— 这会丢失原有 overflow 值，关闭时无法准确还原。
- 保存原始值：用
getComputedStyle(document.body).overflow读取并缓存，而不是依赖 class 切换（class 可能被其他样式覆盖） - iOS Safari 下，仅设
overflow: hidden会导致页面“向上跳”：需同步加document.body.style.position = 'fixed'并记录scrollTop，关闭时再恢复position和scrollTop - 不要监听
touchmove并调用preventDefault()—— 这会破坏所有 touch 行为（如input聚焦、按钮点击），且在 Chrome 120+ 已被限制
为什么 overscroll-behavior 不适用于“禁止全屏滚动”
overscroll-behavior: none 是用来禁用下拉刷新或滚动穿透的，它**不阻止滚动本身**，只控制滚动到底部后的行为（比如禁止触发刷新、禁止透传到父容器）。对“完全不让页面滚动”无效。
- 设在
body上无效果：因为overscroll-behavior对根元素（html）和body无效，只对有滚动的块级容器生效 - 常见误用：给弹窗内部的列表加
overscroll-behavior: contain，是为了防止滚到顶/底时带动背景滚动，但这和禁用整页滚动是两回事 - 真正要禁滚动，还是得回到
overflow: hidden+position: fixed组合
移动端适配中容易被忽略的细节
PC 端设 overflow: hidden 通常就完事了，但移动端（尤其 iOS）有额外约束：
-
height: 100vh在 Safari 中可能失效：地址栏展开/收起会改变视口高度，导致内容溢出或留白；建议用min-height: 100dvh（dynamic viewport height） - 键盘弹出时，iOS 会强制滚动到聚焦元素——即使
body被锁死，也可能短暂闪动；可在focus事件里立即scrollTo(0, 0)补救 - 微信内置浏览器对
position: fixed支持不稳定，若发现禁滚动后页面错位，尝试改用transform: translateZ(0)触发硬件加速
html 和 body 的 overflow: hidden 必须同时存在，iOS 上还得搭配 position: fixed 和 scrollTop 锁定。少一个环节，用户就可能滑动成功。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
