[英]React JS and CSS, scroll up all text comments from database
I'm trying to build a post with comments using React, CSS, and Firebase.我正在尝试使用 React、CSS 和 Firebase 构建带有评论的帖子。 I have this post with 10 comments.我有这篇文章,有 10 条评论。 Now I want to build animation to scroll up the comments, instead of showing all the 10 comments.现在我想构建动画来向上滚动评论,而不是显示所有 10 条评论。
First part is my React JS code.第一部分是我的 React JS 代码。
<div className="scroll-up">
{
comments.map((comment) => (
<p>
{comment.text}
</p>
))
}
</div>
The second part is my CSS code:第二部分是我的 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%);
}
}
The animation works fine if there is only one comment.如果只有一个评论,动画效果很好。 The comment will scroll up for 3 seconds and repeat.评论将向上滚动 3 秒钟并重复。 The problem is: if there is more than 1 comment, ALL comments will show up together, on top of each other, and scroll up for 3 seconds.问题是:如果有超过 1 条评论,所有评论将一起显示,相互叠加,并向上滚动 3 秒。
My question is, how do I let the comments scroll up one by one?我的问题是,如何让评论一一向上滚动?
Edit: I took the advice from algo_user, change .scroll-up p position to relative.编辑:我接受了 algo_user 的建议,将 .scroll-up p 位置更改为相对位置。 But now it's showing all comments, scroll up for 3 seconds and repeat.但现在它显示了所有评论,向上滚动 3 秒并重复。 For all 10 comments, 3 seconds only showed the first 4 or 5. My new question is, some post may have 1 comment, some may have 10 comments, how do I scroll them at the same speed, for all comments?对于所有 10 条评论,3 秒只显示前 4 条或 5 条。我的新问题是,有些帖子可能有 1 条评论,有些可能有 10 条评论,我如何以相同的速度滚动所有评论?
According to w3 School : position: absolute;根据 w3 学校:位置:绝对; -> The element is positioned relative to its first positioned (not static) ancestor element -> 元素相对于它的第一个定位(非静态)祖先元素定位
So, If you change the position property of ".scroll-up p" to initial/relative or even just remove it, then that should work.因此,如果您将“.scroll-up p”的位置属性更改为初始/相对,甚至只是将其删除,那么应该可以。
You can read more about this property here: https://www.w3schools.com/cssref/pr_class_position.asp您可以在此处阅读有关此属性的更多信息: https : //www.w3schools.com/cssref/pr_class_position.asp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.