Estaba usando pestañas desplazables material-ui ( https://mui.com/material-ui/react-tabs/#scrollable-tabs ). como este codigo..
<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> Mientras tanto, quiero corregir el encabezado y la pestaña desplazable cuando me desplazo por las publicaciones como la imagen de abajo.
así que agrego el código style={{position: 'fixed'}} al encabezado y a la pestaña desplazable.
Como resultado, Fijar el encabezado y las pestañas desplazables funciona bien.
Pero en la pestaña desplazable, el desplazamiento de pestañas no funciona tan bien como solía ser.
¿Cómo puedo manejar esto? Por favor, ayúdame ....
Debe agregar style={{position: 'fixed'}} en el elemento principal de 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> Manifestación:
https://codesandbox.io/s/labtabs-material-demo-forked-bx030i?file=/demo.tsx