我正在创建一个简约的网页，涉及在后端实时处理推文。一些推文将通过套接字传递到前端进行显示。我希望屏幕的整个左侧专门用于显示推文（我已经使用div分割了页面）。它们应该被追加，它应该按原样滚动。但是，这是重要的部分：我不想在任何时间点滚动条。当整个左侧填满时，我希望删除顶部的推文，因为底部的推文被添加。目标是让推文的幻觉在屏幕上运行，但是一旦它们完全离开屏幕就被移除以节省内存。
我不知道如何实现这一点。目前，我只是添加到这样的文本框中：
<textarea id='tweets' width='100%' height='100%'></textarea>
使用Javascript：
socket.on('newTweet', function(data) {
tweetBox.innerHTML += data + '\r\n';
});
我想添加的另一件事是每个推文的背景颜色交替。只要可能，我自己就可以实现这个（例如，使用文本框，它不是，除非我弄错了）
答案 0 :(得分：0)
我做了一个以最简单的形式涵盖您的要求的例子。您需要根据自己的特定需求进行调整。
这里列出了＆＃34;技术＆＃34;受雇使这一切工作：
div，其中包含要显示的每条推文的元素，而不是包含纯文本的文本框。这使您可以更好地控制可以显示的内容以及使用它可以执行的操作（即：交替背景颜色）。Array.push添加到结尾，Array.shift从头开始删除），而不是{ {3}}（使用Array.push添加到结尾，Array.pop从末尾删除）。这对于达到预期的效果很重要。position，bottom: 0，min-height: 100%和overflow: hidden强制推文框最初占据整个容器高度，并继续增长向上（意思是最新的推文将在底部保持可见）。 overflow: hidden将阻止向上发展的所有内容对用户可见。当您描述自动滚动＆＃34;时，综合效果就是我想象的意思。
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>
您可以在此处运行上面的代码段（在桌面浏览器中）以查看它的外观。为了使示例工作，我添加了一个按钮，它将生成假推文。