带有滚动的 Div 不尊重顶部填充

Question

基本上，我有一个独立滚动的列表，但是当我向下滚动时，该列表会溢出顶部填充，不是在填充上消失，而是在 div 的末尾消失，从而对我的应用程序造成错误的外观效果。

使用反应代码进行编辑

<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>

伊迪丝与 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;
}

此处，列表位于其初始位置，未滚动：

在这里，向上滚动后的结果：

我如何也可以将填充应用于滚动？

Answer 1

我认为这会比现在更容易，但我并没有取得太大的成功。 我可以模拟所需行为的唯一方法是在伪元素上使用position: sticky作为填充的掩码。 这并不理想，我认为它在具有多个滚动容器的实际场景中不会有用，但我想分享一下，以防它对其他人有帮助。

 div { border: 1px solid black; height: 100px; overflow: scroll; padding: 1.5em; position: relative; } div::before { content: ""; display: block; position: sticky; top: 0; z-index: 100; background-color: white; width: 100%; height: 1.5em; }

 <div> <ul> <li>asdasdasd</li> <li>asdasdasd</li> <li>asdasdasd</li> <li>asdasdasd</li> <li>asdasdasd</li> <li>asdasdasd</li> </ul> </div>

Answer 2

您需要为具有填充的元素分配（白色）背景 - 否则背景（以及填充）将是透明的，从而导致您描述的效果。