移动端Hero区域加载后滚动锁定：内容可见却无法访问

问题情况 #

给自营公司做的定制网站，在iPhone和Android移动端测试时出现异常：页面加载完后，导航栏和Hero区显示正常，缩小视图能看到下面的服务、联系这些内容，但完全没法往下滚；等个几秒滚动功能才恢复，用户很容易以为网站坏了。

已经试过的修复办法 #

• 删掉了.hero-content的大margin-top
• 把height:100vh改成min-height:100vh
• 给视频层加了pointer-events:none
• 移除了.hero和父容器的overflow:hidden
• 移动端加了-webkit-overflow-scrolling:touch
• 确认所有元素宽度都不超过100vw
• 检查过内容没被绝对/固定定位的元素挡住
• 预加载了CSS和字体，还把Hero视频设成preload="none"
  但这些办法都没解决问题。

下一步排查方向 #

• JS阻塞主线程：看看页面加载时有没有耗时的同步JS任务（比如大量DOM操作、复杂计算），把浏览器主线程堵了，导致滚动事件没法及时响应。可以用浏览器DevTools的Performance面板录个加载过程，找找哪里卡了。
• 动态样式延迟生效：检查有没有JS在页面加载后动态加/删影响滚动的样式（比如body或html上的overflow:hidden），而且执行有延迟。可以在DevTools的Elements面板实时盯着body/html的样式变化。
• 第三方脚本搞事：看看引入的第三方工具（比如统计代码、客服插件）是不是加载时占了主线程，或者改了页面滚动行为。试试临时删掉这些脚本，看问题会不会消失。
• 视口配置错了：确认<meta name="viewport">标签配置对不对，有没有user-scalable=no这种限制滚动的属性，或者初始缩放设置有问题。
• Hero区动态内容拖后腿：就算设了preload="none"，视频的加载初始化还是可能占资源，试试临时换成静态图片，看滚动问题会不会好点。

代码优化建议 #

• JS异步加载：把非关键的JS（比如统计、动画脚本）加上async或defer，别让它们阻塞DOM解析和渲染。
• CSS瘦身优化：
  • 把首屏需要的关键CSS内联到<head>里，减少首屏渲染等待时间。
  • 删掉没用的CSS，用PurgeCSS这类工具自动清理冗余样式。
• 资源懒加载：给图片、视频这些非首屏资源开懒加载，用loading="lazy"属性或者JS懒加载方案，降低初始加载的压力。
• 滚动行为规范：别直接改body/html的overflow属性，要是需要临时禁用滚动，给根容器加个自定义类，用完赶紧删掉，而且要确保操作逻辑没延迟。
• 加个性能监控：在代码里加简单的性能监控逻辑，记录页面加载各阶段的耗时，方便定位瓶颈。

内容的提问来源于stack exchange，提问作者mizzy