'Material ui scrollable tabs with position fixed

I was using material-ui scrollable tabs (https://mui.com/material-ui/react-tabs/#scrollable-tabs). like this code..

 <Tabs
        value={value}
        onChange={handleChange}
        variant="scrollable"
        scrollButtons="auto"
        aria-label="scrollable auto tabs example"
        style={{ position: 'fixed', backgroundColor: 'white' }}  // I add this line!
      >
        <Tab label="전체" component={Link} to="/main"></Tab>
        <Tab label="치킨" component={Link} to="/main/chicken"></Tab>
        <Tab label="피자/양식" component={Link} to="/main/pizza"></Tab>
        <Tab label="중식" component={Link} to="/main/chinese" />
        <Tab label="한식" component={Link} to="/main/korean" />
        <Tab label="일식/돈까스" component={Link} to="/main/japanese" />
        <Tab label="족발/보쌈" component={Link} to="/main/pork" />
      </Tabs>

In the meantime, I want to fix header and scrollable tab when I scroll through the posts like below picture.
so I add style={{position: 'fixed'}}code to header and scrollable tab.
As a result, Fixing header and scrollable tabs works fine.
But in scrollable tab, tab scrolling doesn't work as well as it used to be.
How can I handle this?? Please help me ....

enter image description here

javascriptcssreactjsmaterial-ui


Solution 1:[1]

You should add style={{position: 'fixed'}} in the parent element of Tabs :

<Box sx={{ maxWidth: 320, position: 'fixed', bgcolor: 'background.paper' }}>
   <Tabs
       value={value}
       onChange={handleChange}
       variant="scrollable"
       scrollButtons="auto"
       aria-label="scrollable auto tabs example"
   >
       <Tab label="??" component={Link} to="/main"></Tab> 
   </Tabs>
</Box>

Demo:
https://codesandbox.io/s/labtabs-material-demo-forked-bx030i?file=/demo.tsx

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Amr Eraky

Related Questions