React JS 和 CSS，向上滚动数据库中的所有文本注释

Question

我正在尝试使用 React、CSS 和 Firebase 构建带有评论的帖子。 我有这篇文章，有 10 条评论。 现在我想构建动画来向上滚动评论，而不是显示所有 10 条评论。

第一部分是我的 React JS 代码。

<div className="scroll-up">
    {
        comments.map((comment) => (
            <p>
                {comment.text}
            </p>
        ))
    }
</div>

第二部分是我的 CSS 代码：

.scroll-up {
    max-height: 100px;
    overflow: hidden;
    position: relative;
}

.scroll-up p {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    transform:translateY(100%);
    animation: scroll-up 3s linear infinite;
}

@keyframes scroll-up {
    0%   { 
        transform: translateY(100%);        
    }
    100% { 
        transform: translateY(-100%); 
    }
}

如果只有一个评论，动画效果很好。 评论将向上滚动 3 秒钟并重复。 问题是：如果有超过 1 条评论，所有评论将一起显示，相互叠加，并向上滚动 3 秒。

我的问题是，如何让评论一一向上滚动？

编辑：我接受了 algo_user 的建议，将 .scroll-up p 位置更改为相对位置。 但现在它显示了所有评论，向上滚动 3 秒并重复。 对于所有 10 条评论，3 秒只显示前 4 条或 5 条。我的新问题是，有些帖子可能有 1 条评论，有些可能有 10 条评论，我如何以相同的速度滚动所有评论？

Answer 1

根据 w3 学校：位置：绝对； -> 元素相对于它的第一个定位（非静态）祖先元素定位

因此，如果您将“.scroll-up p”的位置属性更改为初始/相对，甚至只是将其删除，那么应该可以。

您可以在此处阅读有关此属性的更多信息： https : //www.w3schools.com/cssref/pr_class_position.asp