Question

当我单击带有“材质用户界面”选项卡的“选项卡”，“ UseRef”和“ ScrollTo”时，我尝试滚动到div。

沙盒链接：https://codesandbox.io/s/exciting-sound-mrw2v

当单击Tab 2时，我希望滚动到滚动时可见的Tab2内容和Tab 1内容。当前需要两次单击才能滚动到div，我想知道为什么它要单击一下。任何线索表示赞赏。谢谢！

Answer 1

我编辑了您的示例，并添加了一个"who | cut -d \" \" -f 1,21,23"钩，如果您按选项卡2，则会滚动到该内容。

https://codesandbox.io/s/lingering-voice-y45cg

Answer 2

使用这种语法

 <Tabs
  classes={{ root: classes.root, scroller: classes.scroller }}
  value={active}
  onChange={(event, newValue) => {
    setActive(newValue);
  }}
  indicatorColor="primary"
  textColor="primary"
  variant={"scrollable"}
  scrollButtons={"on"}
>
  {cities.map((city, index) => (
    <Tab key={index} label={city} value={city} />
  ))}
</Tabs>

这两行属性很重要

variant={"scrollable"}
  scrollButtons={"on"}

完整示例链接：https://codesandbox.io/s/material-ui-centered-scrollable-tabs-ud26w?file=/index.js:645-1048

材质UI选项卡不适用于滚动到

2 个答案: