div:after 已修复在父级可滚动容器中

Question

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

我尝试将 :after 与位置 absolute 一起使用，但这样渐变也会滚动。使用位置 fixed 也不起作用。

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

这是我的代码：

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

这里是 fiddle：https://jsfiddle.net/c6g89xm2/

你有什么想法吗？

Answer 1

这是一个使用 position:sticky 的小技巧，需要您知道身高值：

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

Answer 2

你能为#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>

div:after 已修复在父级可滚动容器中

div:after fixed in parent scrollable container

css

css-position

fixed