Material UI Tabs组件移动端视图下无法滚动的问题该如何解决？

云原生阿岚

2026-10-9

Material UI Tabs 移动端滚动失效可行解决方案

方案1：新增`allowScrollButtonsMobile`属性（适配v4及以上版本，改动最小）

该问题的核心原因是Tabs组件默认会在移动端视图下强制隐藏滚动按钮，同时覆盖滚动逻辑，即使配置了scrollButtons="on"和variant="scrollable"也不会生效。你只需要在Tabs组件上额外添加allowScrollButtonsMobile属性即可恢复正常功能，修改后的代码示例如下：

<Tabs 
  scrollButtons="on" 
  variant="scrollable" 
  allowScrollButtonsMobile
  value={activeTab} 
  onChange={e => this.handleChange(e)}
>
  <Tab key="Overview" activetab={0} label="Overview" />
  <Tab key="Followers" activetab={1} label={getTabCount('Followers', facets.followers)} />
  {/* 其余Tab组件保持不变 */}
</Tabs>

方案2：自定义样式实现触摸滑动（无需显示滚动按钮）

如果你不需要展示两侧的滚动按钮，只需要支持手指左右滑动切换标签，可以通过自定义CSS覆盖默认滚动限制实现：

给Tabs组件添加自定义类名：

<Tabs className="custom-scroll-tabs" variant="scrollable" value={activeTab} onChange={e => this.handleChange(e)}>

添加对应CSS样式：

/* 强制开启横向滚动 */
.custom-scroll-tabs .MuiTabs-scroller {
  overflow-x: auto !important;
  /* 以下为隐藏滚动条的可选配置 */
  scrollbar-width: none;
}
.custom-scroll-tabs .MuiTabs-scroller::-webkit-scrollbar {
  display: none;
}