CSS位置固定的子项在带有溢出y自动的转换父项中，滚动父项时子项移动

Question

我正在尝试使用伪after元素在div的末尾创建一个渐变，以表明它是可滚动的。在div上使用transform: translateZ(0);可以使psuedo元素使用position: fixed;固定在元素的底部。但是，一旦开始滚动，伪元素就会与div的内容一起向上滚动。滚动时是否有可能将此元素固定在该div的底部（除了使用position: sticky;之外（出于浏览器支持的原因，我正在避免使用此元素））？

这是我现在所掌握的东西的一个小提琴： https://jsfiddle.net/ebL485q9/2/

谢谢！

Answer 1

一种实现此目的的方法是将可滚动内容包装在另一个容器div中，然后将渐变的位置从固定更改为绝对。将最大高度更改应用到外部容器。这样，您的外部容器将控制打开和关闭，内部容器将始终保持固定高度。

在这里更新小提琴：

https://jsfiddle.net/pv72xbog/

希望这会有所帮助。干杯。