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

Question

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

使用反应代码进行编辑

Person

伊迪丝（cs）

Person

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

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

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

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

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