嵌套overflow容器内的子Div移动端无法滚动问题排查

我帮你分析下这个嵌套滚动在移动端失效的问题，结合你给出的CSS代码，大概率是视口高度计算偏差或者嵌套滚动的事件冲突导致的，给你几个针对性的解决方案：

1. 修复视口高度计算问题 #

移动端的100vh会受浏览器地址栏、底部导航栏的影响，导致父容器实际高度不足，子容器自然没法滚动。你可以把100vh换成100dvh（动态视口高度），它会自动适配浏览器的界面变化：

.event-chat-messages {
  margin-bottom: $event-chat-input-height;
  overflow: auto;
  height: calc(100dvh - #{$event-chat-height-difference}); /* 替换100vh为100dvh */
  position: relative;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;

  .event-chat-swipe-handler {
    height: 100%;
    /* 先移除overflow: scroll，避免嵌套滚动冲突 */
  }
}

2. 移除不必要的嵌套滚动设置 #

你现在的父容器.event-chat-messages已经设置了overflow: auto和-webkit-overflow-scrolling: touch，子容器再添加overflow: scroll会导致触摸事件被双重拦截，移动端浏览器很难判断该响应哪个容器的滚动。

如果子容器不需要独立滚动（只是作为内容容器），直接去掉它的overflow: scroll即可；如果子容器必须保留独立滚动，要给它设置明确的高度约束，同时让父容器不要抢占滚动事件：

.event-chat-messages {
  margin-bottom: $event-chat-input-height;
  position: relative;
  height: calc(100dvh - #{$event-chat-height-difference});
  /* 移除父容器的overflow设置，让子容器负责滚动 */

  .event-chat-swipe-handler {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
}

3. 优化触摸滚动的兼容性 #

移动端触摸滚动需要确保容器能正确捕获触摸事件，你可以补充几个细节：

• 给滚动容器明确设置overflow-y: auto（而不是overflow: auto），让浏览器优先处理垂直滚动
• 检查页面中是否有其他元素设置了pointer-events: none，阻止了滚动容器的触摸事件

测试建议 #

修改后可以在Chrome的设备模拟器（比如iPhone 14）或者真机上测试，重点验证：

• 容器高度是否适配移动端视口（没有被导航栏遮挡或高度不足）
• 触摸滑动时内容能否顺畅滚动

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