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" />
        <Tab label="야식" component={Link} to="/main/night" />
        <Tab label="분식" component={Link} to="/main/bunsik" />
        <Tab label="카페/디저트" component={Link} to="/main/cafe" />
        <Tab label="편의점/마트" component={Link} to="/main/mart" />
      </Tabs>

In the meantime, I want to immobilize/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 ....