带position fixed和transform的侧边菜单移动端无法垂直滚动求助

问题说明 #

• 侧边菜单初始状态为 transform: translateX(-100%);，点击打开时切换为 transform: translateX(0px);
• 推测是 position: fixed 与 transform 的组合，导致移动设备上无法垂直滚动菜单
• 已尝试多种常规方法实现侧边导航滚动，但均无效果

可行解决方案 #

1. 调整定位与transform的组合逻辑
   避免直接给菜单容器同时设置 position: fixed 和 transform，可以将 position: fixed 应用到外层遮罩容器，把transform仅用来控制菜单的显示/隐藏，菜单内部用普通流或absolute定位。

2. 给菜单内容容器单独设置滚动规则
   为菜单的内容区域添加如下CSS，强制开启垂直滚动并优化移动端体验：

   .sidebar-inner {
     max-height: 100vh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
   

   注意要确保这个内容容器没有被transform属性影响，transform仅作用于外层的菜单容器。

3. 修复transform导致的fixed定位上下文偏移
   当元素被添加transform属性后，position: fixed 的参考系会从视口变为该元素本身。可以把fixed定位转移到没有transform的父级元素，让菜单的滚动区域基于视口计算高度。

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