How to scoll Swipeabledrawer MUI in React

Question

I have a swipeabledrawer in React from MUI, which I am using to show a lengthy content. The title should be visible even when the drawer is closed. I had achieved this in the following way MUI SwipeableDrawer

Sample is added in stackblitz, please take a look

I can swipe open and close using the puller above the title. But the entire layout is not scroll-able.

I have tried to set the overflow:'scroll' and 'auto', then the content inside is scrollable not the entire layout. and when i do this the top edge with title sticking out when closed is not working.

How can i solve this. thanks

Answer 1

The scroll didn't work because of the absolute position of the parent element of the drawer. To fix it, you should change the position of StyledBox inside SwipeableDrawer to relative, and set it negative margin:

        <StyledBox
          sx={{
            position: 'relative',
            marginTop: `${-drawerBleeding}px`,
            borderTopLeftRadius: 8,
            borderTopRightRadius: 8,
            visibility: 'visible',
            right: 0,
            left: 0,
          }}
        >

Then wrap your list inside a separate container with max-height which will determine when scroll will appear:

const ListContainer = styled('div')(() => ({
  maxHeight: '300px',
  overflow: 'auto',
}));

...

          <ListContainer>
            {animals.map((animal) => {
              return <div>{animal}</div>;
            })}
          </ListContainer>

This way the scroll will work.

Working Example