Question

我有一个容器div .filter，其最大高度为200px。在其中，我有一个包含很多项目的列表，我想在父级中滚动。效果很好，但是我还想使用伪元素放置在.filter的底部，以创建渐变效果，长列表向后滚动到该效果中。但是，我无法使这个psuedo元素固定在.filter的底部，因为它当前与其他内容一起滚动？

谢谢！

HTML

<span class="filter">
  <span class="filter-list">
    <h3>List item</h3>
    <h3>List item</h3>
    <h3>List item</h3>
    <!-- List items continue here -->
  </span>
</span>

SCSS

.filter {
  width: 300px;
  height: 200px;
  position: absolute;
  overflow-y: scroll;

    // Create gradient to indicate further items in list
    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40px;
        background-image: linear-gradient(to top, #000000, transparent);
    }

    .filter-list {
        overflow-y: scroll;
        padding-bottom: 40px;
    }
}

Fiddle

Answer 1

您需要将height中的.filter-list设置为.filter
将position: relative或absolute设置为.filter

.filter {
  width: 300px;
  position: relative; /* You can set to absolute */
}
.filter:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 15px;
  height: 40px;
  background-image: linear-gradient(to top, #000, transparent);
}
.filter .filter-list {
  overflow-y: scroll;
  padding-bottom: 40px;
  height: 200px;
  display: block;
}

<div class="filter">
  <div class="filter-list">
    <h3>List item</h3>
    <h3>List item</h3>
    <h3>List item</h3>
    <h3>List item</h3>
    <h3>List item</h3>
    <h3>List item</h3>
    <!-- List items continue here -->
  </div>
</div>

与scss here

溢出：滚动与位置：绝对父级阻止滚动

1 个答案: