HTML/Javascript-创建页面的一个部分，该部分自动滚动，并在顶部文本离开屏幕时将其删除

我正在创建一个极简主义的网页，涉及在后端实时处理推文。一些tweet将通过一个要显示的套接字传递到前端。我希望屏幕的整个左侧都用于显示tweet（我已经用div分割了页面）。它们应该被追加，并且应该按原样滚动。然而，这里有一个重要的部分：我不想在任何时间点滚动条。当整个左侧填满时，我希望顶部的tweet被删除，因为底部的tweet被添加。我们的目标是给人一种tweet离开屏幕的错觉，但是一旦它们完全离开屏幕就会被删除以节省内存

我不知道如何实现这一点。目前，我只是在一个文本框中添加如下内容：

<textarea id='tweets' width='100%' height='100%'></textarea>

---

我想补充的另一件事是让每条推文的背景颜色交替。只要有可能，我可以自己实现（例如，使用文本框，除非我弄错了）

我已经制作了一个示例，以最简单的形式介绍了您的需求。您需要根据自己的具体需要进行调整

下面列出了使所有工作正常进行的“技巧”：

使用

div

，它将为显示的每条tweet包含一个元素，而不是纯文本文本框。这使您能够更好地控制可以显示的内容以及可以使用它执行的操作（即：交替背景色）

跟踪列表中的tweet元素，以便在列表过长时轻松删除它们。请注意，我没有严格监控这个列表，比如在tweet离开屏幕时立即删除它：我认为这太过分了，因为我真的无法预见一条、十条或一百条tweet会占用太多内存。取而代之的是，只有一个阈值（应该慷慨设置），在这个阈值之后，每次显示一条新的推文时，推文都会被删除。

• 推文以a（使用

  Array.push

  添加到末尾，使用

  Array.shift

  从开头删除）的形式添加和删除，而不是a（使用

  Array.push

  添加到末尾，使用

  Array.pop

  从末尾删除）。这对于达到预期效果很重要

为每个新tweet应用一个类，以便它们可以显示其交替的背景。有必要在这里保留一个计数器，以便知道新推文是奇数还是偶数。

• 请注意，CSS通常可以用于这类事情。然而，由于tweet最终会从列表的开头被删除，因此每次删除tweet时，您都会体验到所有tweet的交替背景
• 如果你真的想，你可以解决这个问题，比如一次删除两条推文，而不是一条（从而保留它们的奇偶状态）

一个CSS“技巧”，使用

位置

，

底部：0

，

最小高度：100%

和

溢出：隐藏

，这迫使tweet框最初采用完整容器高度，并继续向上增长（意味着最新的tweet将在底部保持可见）。

overflow:hidden

将阻止用户看到所有向上增长的内容。当你描述你的“自动滚动”时，我想象你的意思就是综合效应。

• 该示例被简化为将其应用于具有

  位置：fixed

  的单个元素。事实上，我怀疑你会将tweet框包含在另一个元素中。您可以使用其他类型的

  位置

  s来实现相同的结果。如果你需要帮助，给我一个评论

下面是一个例子：

//抓住我们的推文框，这样我们就可以操纵它了。
var tweetBox=document.getElementById（“tweetBox”）；
//维护显示推文的列表（或“数组”），
//我们将在删除它们时再次使用它。
var displayedTweets=[]；
//需要决定何时开始删除推文。
//慷慨一点：推特不会消耗太多内存。
//我们当然不希望它们过早消失。
var deleteTweetsAfter=100；
//我们会记录一个推特号码
//因此，我们可以对tweet应用交替样式
//（并且在删除推文时不要更改它们）。
var tweetNumber=0；
//下面是显示tweet的函数。
//你应该调用这个函数
//当您的套接字接收到新的tweet时。
函数显示Newtweet（文本）{
//我们将创建一个新元素来显示我们的tweet。
var newTweetDiv=document.createElement（“div”）；
//指定其他类
//取决于“tweetNumber”是奇数还是偶数。
tweetNumber+=1；
newTweetDiv.className=tweetNumber%2==0？“偶数”：“奇数”；
//您可以在这个“div”中放入任何喜欢的HTML，如下所示：
newweetdiv.innerHTML+=“”+text+“
”；
//将此新元素添加到tweet框的末尾。
tweetBox.appendChild（newweetdiv）；
//还要将其添加到数组的_end_。
//当我们开始删除推文时，这一点很重要，
//你会在下面看到。
显示的weets.push（newweetdiv）；
//检查我们是否超过了推特限制。
如果（displayedTweets.length>deleteTweetsAfter）{
//将u first uu tweet从阵列中弹出。。
var tweetToDelete=displayedTweets.shift（）；
//并将其从我们的推文框中移除。
tweetBox.removeChild（tweetToDelete）；
//您可以使用控制台日志记录来了解它的实际工作情况。
//日志（tweetBox、tweetToDelete）；
}
}
//我添加了一个按钮来测试这个。
//这就是如何连接新的推特功能：
var testTweeter=document.getElementById（“testTweeter”）；
testTweeter.onclick=function（）{
var tweetText=“非常棒的tweet，带有随机性：”；
tweetText+=Math.random（）.toString（）；
displayNewTweet（tweetTe
socket.on('newTweet', function(data) {
      tweetBox.innerHTML += data + '\r\n';
    });