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”的位置属性更改为 initial/relative 或什至只是删除它，那么这应该可以工作。

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