Css div：在父可滚动容器中修复后

我试图在一个可滚动的

容器上放置一个半透明渐变，以获得纯CSS的视觉效果。我想梯度留在原地，而下面的内容可以滚动。当然，滚动条必须是可访问的

我试着用position

absolute

使用

：after

，但这样也可以滚动渐变。使用position

fixed

也不起作用

旁注：容器中的内容是从数据库生成的。事实上，如果内容低于100px，我就不需要梯度，但我认为这是一个不同的任务

这是我的代码：

#容器{
位置：相对位置；
最大高度：100px；
溢出y：自动；
}
#容器：之后{
内容：''；
显示：块；
位置：绝对位置；
左：0；
排名：0；
右：0；
底部：0；
背景：线性梯度（#eeeeee 00，#eeeeee ff）；
}

Lorem

同侧


多洛


坐着


艾米特

下面是一个使用

位置：粘性的技巧，它要求您知道高度的值：


#容器{
位置：相对位置；
最大高度：100px；
溢出y：自动；
}
#容器：之后{
内容：''；
显示：块；
位置：粘性；
底部：0；
利润上限：-100px；
高度：100px；
背景：线性梯度（透明，#eee）；
}

Lorem

同侧


多洛


坐着


艾米特



您能否创建#容器的父容器并在父容器上使用：after？像这样：


#容器{
位置：相对位置；
背景：#fff；
最大高度：100px；
溢出x：隐藏；
溢出y：自动；
边框：1px实心#ddd；
}
#父容器{
位置：相对位置；
}
#父容器：在{
内容：''；
显示：块；
位置：绝对位置；
z指数：2；
左：0%；
最高：0%；
宽度：100%；
身高：100%；
背景：线性梯度（#aaffff99，#ffaaff99）；
指针事件：无；
}

洛雷姆


ipsum


多洛


坐着
amet


是的，我试过这个。但是渐变也会覆盖滚动条。当我的渐变从透明变为不透明时，滚动条的底部是看不见的。我喜欢这种巧妙的方法。它的尺寸是固定的，这一事实使它受到一些影响。但它仍然足以满足我的需要。谢谢