横屏模式下如何让div元素在Y轴方向可滚动

常见原因及对应修复方案 #

• 视口高度适配错误
  移动端vh单位不会自动扣除浏览器地址栏、状态栏的占用高度，横屏时容器实际高度超过可视范围，被上层元素截断导致滚动失效。
  修复代码：

  .notice-container {
    /* 兼容旧设备的降级写法 */
    height: 100vh;
    /* 动态视口高度，自动适配系统控件占用空间 */
    height: 100dvh;
    overflow: auto;
    /* 开启移动端流畅滚动 */
    -webkit-overflow-scrolling: touch;
  }
  

• 祖先元素溢出隐藏截断
  检查通知容器的所有上层父元素，若存在overflow: hidden属性，移除该属性或者修改为overflow: auto，保证溢出内容可以传递到可滚动的子容器。
• 触摸事件被拦截
  若容器上层存在遮罩层，或者元素被设置了touch-action: none属性，会拦截滚动触摸事件。
  修复代码：

  .notice-container {
    /* 允许纵向触摸滚动 */
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  

• 固定定位容器未限制边界
  若通知容器为position: fixed定位，必须显式设置top、bottom属性限制容器高度，不能仅靠内容撑开：

  .notice-container {
    position: fixed;
    top: 16px;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    overflow: auto;
    max-width: 600px;
  }
  

问题示意截图 #

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