具有动态内容的 CSS 信用滚动滚动动画

Question

我正在尝试产生一种信用滚动类型效果，该效果从JustGiveAPI读取并列出捐赠者。我能够填充捐赠者列表并使用 API 就可以了。问题是试图让它向上滚动屏幕。

我正在使用CSS动画并且效果有效，但是我拥有它的方式使滚动仅显示一定数量的学分。我已经设置了这样的动画：

@keyframes creditRoll {
0% {
top: 100%;
}
100% {
top: -100%;
}
}

演职员表div 的样式如下：

#Credits {
display: block;
position: absolute;
top: 100%;
width: 100%;
animation: creditRoll 75s linear forwards infinite;
animation-delay: 5s;
animation-iteration-count: 1;
}

我相信100%是指屏幕尺寸而不是div 高度？无论如何，我可以让整个div向上滚动和退出屏幕吗？它确实在分钟向上滚动，但在演职员表的中途停止。

有关示例，请参阅 https://jsfiddle.net/kao6hs2t/。

Answer 1

使用位置：绝对有时会很棘手。我想说的是，如果您为 id="Credits" 的父div 提供一个固定的高度(也许是 100vh？(，并且可能还会隐藏溢出，那么管理起来可能会更容易。这样，它不会影响滚动条或最终浮动在页面上其他位置的内容上，这也会使动画的位置根据父div 在页面中的位置可靠地开始，否则位置 100% 可能引用页面。

我不是 100% 确定这是您面临的问题，但希望它对:)有所帮助