时间戳

首页 > 解决方案 > React JS 和 CSS，向上滚动数据库中的所有文本评论

javascript - React JS 和 CSS，向上滚动数据库中的所有文本评论

问题描述

我正在尝试使用 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 条评论，我如何以相同的速度滚动它们，对于所有评论？

标签： javascriptcssreactjs

解决方案

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

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

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

推荐阅读