Question

我正在尝试在可滚动的<div>容器上放置一个半透明的渐变，以使用纯CSS获得视觉效果。我希望渐变保持不变，而下面的内容可以滚动。当然，滚动条必须是可访问的。

我尝试将:after与位置absolute一起使用，但是这种方式也可以滚动渐变。使用位置fixed也不起作用。

旁注：容器中的内容是从数据库生成的。实际上，如果内容的高度小于100像素，则不需要渐变，但这是我认为的另一项任务。

这是我的代码：

#container {
  position: relative;
  max-height: 100px;
  overflow-y: auto;
}

#container:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(#eeeeee00, #eeeeeeff);
}

<div id="container">
  Lorem<br><br> ipsum
  <br><br> dolor
  <br><br> sit
  <br><br> amet
  <br><br>
</div>

这是一个小提琴：https://jsfiddle.net/c6g89xm2/

您有什么想法吗？

Answer 1

您可以为#container创建父对象，并在父对象上使用：after吗？像这样：

#container { 
  position: relative; 
  background: #fff;
  max-height: 100px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #ddd;
}

#parent-container {
  position: relative;

}
#parent-container:after {
  content: ''; 
  display: block; 
  position: absolute; 
  z-index: 2; 
  left: 0%;
  top: 0%; 
  width: 100%; 
  height: 100%; 
  background: linear-gradient(#aaffff99, #ffaaff99); 
  pointer-events: none;
}

<div id="parent-container">
  <div id="container">
  Lorem<br><br>
  ipsum<br><br>
  dolor<br><br>
  sit<br><br>
  amet<br><br>
  </div>
</div>

Answer 2

这是使用position:sticky的技巧，要求您知道height的值：

#container {
  position: relative;
  max-height: 100px;
  overflow-y: auto;
}

#container:after {
  content: '';
  display: block;
  position: sticky;
  bottom:0;
  margin-top:-100px;
  height:100px;
  background: linear-gradient(transparent, #eee);
}

<div id="container">
  Lorem<br><br> ipsum
  <br><br> dolor
  <br><br> sit
  <br><br> amet
  <br><br>
</div>

div：固定在父级可滚动容器后

2 个答案: