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

Question

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

我不知道如何实现这个。目前，我只是添加到一个文本框，如下所示:

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

Javascript:

socket.on('newTweet', function(data) {
      tweetBox.innerHTML += data + '\r\n';
    });

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

Answer 1

我制作了一个示例，以最简单的形式满足您的要求。您需要根据您的特定需求进行调整。

以下是使其全部正常工作所采用的“技术”列表:

1. 使用 div其中将包含显示的每条推文的元素，而不是纯文本的文本框。这使您可以更好地控制可以显示的内容以及可以用它执行的操作(即:交替背景颜色)。
2. 跟踪列表中的推文元素，以便在列表变得太长时可以轻松删除它们。请注意，我没有严格监控此列表，以便在推文离开屏幕后立即将其删除:我认为这有点过分了，因为我真的无法预见一条、十条或一百条推文会占用多少内存。相反，只有一个阈值(应该慷慨地设置)，之后每次显示新推文时都会删除一条推文。
   • 在 first-in-first-out (FIFO) manner 中向此列表添加和删除推文(通过使用 Array.push 添加到末尾，并使用 Array.shift 从开头删除)，而不是 last-in-first-out (LIFO) manner (使用 Array.push 添加到末尾，并使用 Array.pop 从末尾删除)。这对于达到预期效果非常重要。
3. 对每条新推文应用一个类，以便它们可以显示交替的背景。有必要在这里保留一个计数器，以便知道新推文是奇数还是偶数。
   • 请注意，CSS 通常可以用于此类事情。但是，由于推文最终会从列表开头删除，因此每次删除推文时，您都会遇到所有推文背景交替变化的情况。
   • 如果您确实愿意，可以解决这个问题，例如一次删除两条推文而不是只删除一条(从而保留它们的奇数和偶数状态)。
4. 使用position的CSS“技巧” , bottom: 0 , min-height: 100%和overflow: hidden这迫使推文框最初占据整个容器的高度，并继续向上增长(意味着最新的推文将在底部保持可见)。 overflow: hidden将阻止所有向上生长的内容对用户可见。综合效果就是我想象的你描述你的“自动滚动”时的意思。
   • 该示例经过简化，因为它被应用于带有 position: fixed 的单个元素。 。实际上，我怀疑您会将推文框包含在不同的元素中。您可以使用其他类型的position在那里达到相同的结果。如果您需要帮助，请给我留言。

示例如下:

// Hold onto our tweet box so we can manipulate it.
var tweetBox = document.getElementById("tweetBox");

// Maintain a list (or `Array`) of displayed tweets,
// which we'll use again when it's time to delete them.
var displayedTweets = [];

// Need to decide when to start deleting tweets.
// Be generous: tweets won't consume much memory.
// We certainly don't want them disappearing prematurely.
var deleteTweetsAfter = 100;

// We'll keep track of a tweet number
// so we can apply alternating styles to the tweets
// (and not have them change when tweets are deleted).
var tweetNumber = 0;

// Here's our function to display a tweet.
// You should call this function
// when your socket receives a new tweet.
function displayNewTweet(text) {
  // We'll create a new element to display our tweet in.
  var newTweetDiv = document.createElement("div");

  // Specify a different class
  // depending on whether `tweetNumber` is odd or even.
  tweetNumber += 1;
  newTweetDiv.className = tweetNumber % 2 == 0 ? 'even' : 'odd';

  // You can put whatever HTML you like in this `div`, like so:
  newTweetDiv.innerHTML += "<p>" + text + "</p>";

  // Add this new element to the end of the tweet box.
  tweetBox.appendChild(newTweetDiv);

  // Also add it to the _end_ of our array.
  // This is important for when we start deleting tweets,
  // which you'll see below.
  displayedTweets.push(newTweetDiv);

  // Check if we've exceeded our tweet limit.
  if (displayedTweets.length > deleteTweetsAfter) {
    // Pop the _first_ tweet out of our array..
    var tweetToDelete = displayedTweets.shift();

    // and remove it from our tweet box.
    tweetBox.removeChild(tweetToDelete);

    // You can use console logging to know it actually worked.
    // console.log(tweetBox, tweetToDelete);
  }
}

// I've added a button to test this.
// This is how it'd be hooked up the new tweet function:
var testTweeter = document.getElementById("testTweeter");
testTweeter.onclick = function() {
  var tweetText = "Awesome tweet, with randomness: ";
  tweetText += Math.random().toString();

  displayNewTweet(tweetText);
};

// You'd use your sockets to call this function:
// socket.on('newTweet', displayNewTweet);

#left {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 200px;
  /* `min-height` + `bottom: 0;` is the "autoscroll" magic -
     the element will keep growing _upwards_
     but it can't be seen so nobody would notice. */
  min-height: 100%;
  overflow: none;
  background: grey;
}
#tweetBox > div.odd {
  background: cyan;
}
#tweetBox > div.even {
  background: yellow;
}
#right {
  margin-left: 200px;
}

<div id="left">
  <div id="tweetBox">
  </div>
</div>

<div id="right">
  <button id="testTweeter">Add test tweet</button>
</div>

您可以在此处运行上述代码片段(在桌面浏览器中)以查看其外观。为了使示例正常工作，我添加了一个按钮，该按钮将生成假推文。