Essentially, I encountered an issue where a list was scrolling independently but overflowed the top padding when scrolled down, disappearing not within the padding area, but at the end of the div. This led to a visually incorrect effect on my application.
Edit using React code
<div className={styles.parent}>
<div className={styles.div1}>
<Header props={props} />
<Cards/>
</div>
<div className={styles.div2}>
{cards.map((card, index) => (
<>
<List className={styles.cardsItem}>
<ListItem
button
divider={true}
key={index}
selected={selectedIndex === index}
onClick={e => handleListItemClick(e, index, card)} >
<ListItemAvatar>
<Avatar>
<CreditCardIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={card.name} secondary={card.number} />
</ListItem>
</List>
</>
))}
</div>
</div>
Edit using CSS
.parent {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
height: 100vh;
text-align: center;
overflow: hidden;
}
.div1 {
grid-area: 1 / 1 / 2 / 2;
height: 45vh;
}
.div2 {
grid-area: 2 / 1 / 3 / 2;
height: 55vh;
overflow: scroll;
padding: 1.5em;
box-shadow: 0px -30px 30px #0000000d;
border-radius: 2em;
}
Above is the list in its initial position without any scrolling:
https://i.sstatic.net/6Sx05.png
And below is the result after scrolling up:
https://i.sstatic.net/2ANDw.png
How can I also incorporate the padding into the scrolling behavior?