移动端Chrome/Safari侧边栏overflow:auto纵向滚动异常问题

核心问题判定 #

移动端Chrome、Safari使用的WebKit/Blink内核对非根滚动容器的高度计算、滚动事件冒泡逻辑和桌面端、Brave移动端存在差异，原代码存在三个明确触发异常的点：

• 用margin-top/margin-bottom为上下固定栏预留位置，叠加多套height/maxHeight的calc降级规则，会导致内核高度计算出现偏差，滚动容器实际可滚动高度小于内容总高度，滚动到偏差临界点时就会把滚动事件冒泡给父组件，触发父容器滚动
• 固定定位的头部、底部栏没有做触摸事件拦截，手指滑动时如果触碰到固定栏边缘区域，滑动事件会直接穿透到下层父元素
• 滚动容器缺少移动端专属的滚动行为配置，默认overflow: auto在非顶层容器上会出现惯性滚动失效、滚动链穿透问题

可直接替换的修复CSS #

不需要调整现有DOM结构，直接替换三个类的样式即可：

[`& .${classes.toolbar}`]: {
  position: 'fixed',
  top: 0,
  left: 0,
  display: 'block',
  width: '224px',
  backgroundColor: theme.palette.mode === 'light' ? 'white' : '#1F4B76',
  zIndex: 100,
  touchAction: 'none',
  overscrollBehavior: 'contain'
},

[`& .${classes.scrollableList}`]: {
  position: 'absolute',
  top: '182px',
  bottom: '74px',
  left: 0,
  width: '224px',
  zIndex: 50,
  overflowY: 'auto',
  -webkit-overflow-scrolling: 'touch',
  overscrollBehavior: 'contain',
  overscrollBehaviorY: 'contain'
},

[`& .${classes.footer}`]: {
  position: 'fixed',
  bottom: 0,
  left: 0,
  display: 'block',
  width: '224px',
  backgroundColor: theme.palette.mode === 'light' ? 'white' : '#1F4B76',
  zIndex: 100,
  touchAction: 'none',
  overscrollBehavior: 'contain'
}

关键调整说明 #

• 移除滚动容器原有的margin、多套height/maxHeight规则，改用top+bottom双边界的绝对定位撑开滚动区域，从根源避免WebKit内核的高度计算误差
• 给固定头、固定尾加touchAction: none，拦截元素本身的触摸滑动事件，避免事件穿透
• 给所有滚动相关容器加overscrollBehavior: contain，直接阻断滚动链，滚动到容器边界时不会把事件冒泡给父级，不需要额外写JS阻止默认事件
• 给滚动容器加-webkit-overflow-scrolling: touch，开启移动端原生惯性滚动，避免滚动卡顿
• 补全fixed/absolute定位的left锚点，避免部分移动端浏览器下定位偏移

低版本兼容补充 #

如果需要兼容iOS 15及更早版本，给侧边栏最外层容器增加transform: translateZ(0)，触发GPU渲染层，即可避免fixed定位在滚动时的抖动、层级异常问题。

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