height: 100vh + overflow: hidden 不是实现全屏背景且内容不滚动的合理组合，因会导致内容裁剪、交互失效、可访问性受损及移动端高度计算失准等问题。
直接说结论：height: 100vh + overflow: hidden 不是实现“全屏背景且内容不滚动”的合理组合，反而大概率导致内容被裁剪、交互失效或可访问性问题。
为什么 overflow: hidden 会破坏内容可用性
设置 overflow: hidden 并不是让页面“不滚动”的正确逻辑，它只是强行隐藏滚动条并截断溢出区域——文字超出视口看不见、表单焦点无法滚动到、键盘 Tab 导航卡在半途、屏幕阅读器可能跳过被裁内容。
- 它不阻止用户用鼠标滚轮或触控板触发滚动行为，只是让视觉上“看不到滚动”，实际滚动仍发生（尤其在 Safari 中）
- 如果内容高度超过
100vh（比如长文案、响应式断点变化），overflow: hidden会让下半部分完全不可见且不可达 - 移动端 Webview 或 PWA 场景下，
overflow: hidden可能干扰原生手势（如下拉刷新、侧滑返回）
height: 100vh 在移动端的实际表现不稳定
height: 100vh 在 iOS Safari 和部分安卓浏览器中会取“初始视口高度”，而非当前可视高度。地址栏收起/展开、软键盘弹出时，100vh 值不会实时更新，导致背景留白或内容被遮挡。
- 例如：iPhone 上打开软键盘后，
100vh仍按未弹出键盘时的高度计算，背景图被顶出视口下方 - 更稳的替代是
min-height: 100vh，允许容器随内容自然延展，不强求“刚好一屏高” - 若真需限制高度（如模态层），应配合
max-height: 100vh+overflow-y: auto，而非一刀切hidden
真正需要“不滚动”的场景，该用什么
所谓“内容不滚动”，通常指主视觉区域（如封面页、引导页）需固定一屏展示，但页面其余部分仍需正常滚动——这不该靠全局 overflow: hidden 实现，而应分层控制。
立即学习“前端免费学习笔记（深入）”；
- 把封面区域设为
min-height: 100vh，内部用display: flex居中内容，不设height硬约束 - 背景图用
::before伪元素 +position: fixed实现，与内容层解耦（避免受父级overflow影响） - 若需临时禁用滚动（如弹窗打开时），用 JS 动态给
body加style="overflow: hidden"，并记录scrollY值，关闭时恢复——不能写死在 CSS 里 - 禁止滚动 ≠ 隐藏滚动条；若仅想隐藏条但保留滚动能力，用
overflow-y: scroll+ 自定义滚动条样式（::-webkit-scrollbar）
最易被忽略的一点：全屏背景和“是否允许滚动”是两个正交问题。背景是否铺满，取决于元素尺寸与定位方式；是否滚动，取决于内容高度与容器 overflow 设置。混在一起硬凑 height: 100vh + overflow: hidden，等于用错工具修电路——表面不动，实则埋了断路隐患。
