Javascript 段落底部淡出

我试图在一个段落中添加淡出效果，以下是我所做的：

但当我向下滚动时，淡入淡出的效果不会粘在div的底部：

我也在这个代码笔中重复了这个问题：有没有办法使淡入效果始终保持在div的底部？谢谢

.container{
位置：相对位置；
宽度：300px；
最大高度：100px；
溢出y：滚动；
}
.货柜：之后{
内容：“；
位置：绝对位置；
z指数：1；
底部：0；
指针事件：无；
背景图像：线性渐变（至底部，rgba（255255,0），rgba（255255,1）90%）；
宽度：100%；
身高：4rem；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。

您可以添加一个额外的容器，但它也会覆盖卷轴（您可以减小宽度）

.container{
宽度：300px；
最大高度：100px；
溢出y：滚动；
}
.包装：之后{
内容：“；
位置：绝对位置；
z指数：1；
底部：0；
指针事件：无；
背景图像：线性渐变（到底部，rgba（255，255，255，0），rgba（255，255，255，1）90%）；
宽度：100%；
身高：4rem；
}
.包裹{
显示：内联块；
位置：相对位置；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它有
不仅存活了五个世纪，而且飞跃到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着desktop的发布而流行
发布软件，如Aldus PageMaker，包括Lorem Ipsum版本。

对样式表做了一点小小的更改。您希望p滚动，而不是容器

.container{
位置：相对位置；
宽度：300px；
最大高度：100px；
}
.货柜{
溢出y：滚动；
最大高度：100px；
}
.货柜：之后{
内容：“；
位置：绝对位置；
z指数：1；
底部：0；
指针事件：无；
背景图像：线性渐变（至底部，rgba（255255,0），rgba（255255,1）90%）；
宽度：100%；
身高：4rem；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。

您可以在

之后或
之前使用
：：


p{
溢出y：滚动；
高度：7公分；
}
.淡出{
位置：相对位置；
高度：7公分；
}
.fadeOut：：之后{
位置：绝对位置；
内容：''；
显示：块；
高度：1米；
左：0；
右：0；
底部：0；
背景：线性渐变（透明，白色）；
}


Lorem ipsum dolor sit amet，是一位杰出的献身者。青藤。这是一场疯狂的对决，这是一场完美的对决。Proin magna Elite、ultricies vitae tristique eget、luctus vitae sem。普罗因马萨马萨，发酵液
pulvinar a，luctus在前一个月的会议上发言。前庭软体动物、活体动物、软体动物、猫科动物。坐在温文尔雅的座位上，坐在舒适的座位上。乌尔特里斯，利古拉·奎斯·廷西登
accumsan、justo tortor aliquet erat、eget finibus nunc purus nec felis。整型流苏，酒香和酒香，有效的葡萄酒，无需性爱的生命。整数nisl elit，iaculis id laoreet ut，accumsan vel lorem。权杖
在努拉塞德尤伊斯莫。阿利奎姆·埃拉特·帕特。我不知道该怎么做。这是我的心愿。埃尼安·内克·塞姆、奥纳·鲁特鲁姆、福利西斯·麦格纳。Phasellus在mollis对turpis有效。征服者
我要你去。多奈克·埃罗斯·福西布斯，比本杜姆·米因，康格酒队。埃尼亚普雷蒂姆汽车公司。勃朗迪特酒只是一种发酵剂。阿利奎姆坐在阿梅特·佩伦茨克的座位上。奥氏悬钩子，
这是我生命中最美好的时刻。克拉斯·朗库斯·莫里斯·拉奥里特·康莫多·波特托。在这之前，我的生命之大，我的生命之大，我的生命之大，我的生命之大，我的生命之大，我的生命之大，我的生命之大，我的生命之大，我的生命之大，我的生命之大，我的生命之大，我的生命之大，我的生命之大。塞德·维塔·梅特斯·努克。老街前庭
这是我们的门。产于蒙特斯的天然对虾和马格纳斯虎鲸（Orci varius natoque penatibus et magnis），以及印度虎鲸（nascetur ridiculus mus）。Pellentsque libero est，interdum ut sem nec，Pellentsque tincidunt直径。这是一只猫，它是一只猫，它是一只猫。不结盟运动
托托·普鲁斯，埃格斯塔斯在港，波苏尔·韦尔梅特斯。莫里斯nec车辆的封地水道。这是一个很好的例子。在arcu-efficitur中的iaculis nibh，位于门的lacinia。大花斑猴。普拉森特
不可抗拒的，不可抗拒的