移动端Hero-section无法滚动问题求助

常见排查方向及修复步骤 #

• 检查overflow属性设置错误
  查看Hero-section或其父容器的CSS，确认移动端媒体查询中是否设置了overflow: hidden——这会直接阻止滚动。若需要滚动，将其替换为overflow-y: auto（仅允许垂直滚动）或overflow: visible，同时给容器设置明确高度触发滚动逻辑：

  @media (max-width: 768px) {
    .hero-section {
      overflow-y: auto;
      height: 100vh;
    }
  }
  

• 排查元素覆盖导致的滚动拦截
  即使调整过z-index，仍可能有透明/固定定位元素（如导航遮罩、悬浮层）覆盖在Hero区域上方，拦截触摸滚动事件。通过浏览器开发者工具的移动端调试模式查看元素层级，若存在这类覆盖元素，给其添加pointer-events: none（除非该元素需要交互）：

  .overlay-element {
    pointer-events: none;
  }
  

• 检查定位属性冲突
  若Hero-section或其父容器使用了position: fixed，可能导致滚动上下文异常。尝试移除不必要的固定定位，或重新梳理容器的层级与定位上下文。

• 排查JavaScript对触摸事件的拦截
  检查是否有自定义touchstart/touchmove事件监听调用了preventDefault()，这会阻止原生滚动行为。移除不必要的默认行为阻止代码，仅在需要自定义交互时使用该方法：

  // 错误示例：阻止了滚动
  document.querySelector('.hero-section').addEventListener('touchmove', (e) => {
    e.preventDefault();
  });
  

• 确认容器高度设置
  若Hero-section未设置明确高度，或高度未被内容撑开至超过视口，不会触发滚动。确保移动端下容器高度（如height: 100vh）小于内容实际高度。

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