使用javascript滚动日志文件（tail-f）动画

我想在网站上创建一个动画来模拟滚动日志文件或tail-f。我会给它提供一个虚假日志消息列表，它们会被写入div的底部，并随着新消息的显示而向上和向下滚动，然后循环。它需要看起来真实，黑白相间，使用固定宽度字体等

---

有人知道有什么javascript或jQuery库可以帮我解决这个问题吗？我是javascript的初学者，因此，如果您能提供任何关于如何使用javascript的建议，我将不胜感激。

我为您举了一个简单的例子

//一些演示数据
对于（var i=0；i，这里有一个很好的解决方案

它使用ajax请求和HTTP Range:header仅请求日志文件的最后30KB。然后它轮询附加到该文件的数据，并且只检索新数据（不刷新整个文件，甚至不刷新最后30KB）。还处理文件截断

我更新了Manuel van Rijn的脚本，添加了计时器和切换开关，并对日志行进行了一些小的更改。希望这能有所帮助。

html:

这可以通过CSS实现，只需使用
transform:rotateX（180度）；

这里唯一的问题是滚动也被反转了，这不是移动设备的问题。
请在回答中包含解决方案的要点，这样用户就不必离开该站点。此外，如果链接失效怎么办？我看到的最好的解决方案是，它允许您向上滚动并停留在该位置。但是，该功能的作用是：在IE 11和Firefox中与Chrome不同。在IE和Firefox中，如果你向上滚动，你会看到内容随着新行的添加而向上移动，我认为这是正确的行为。但在Chrome中，内容不会向上移动，因此如果你不在可滚动区域的底部，你不知道会添加新内容。你知道如何让Chrome表现得像Chrome吗Firefox/IE？
<div id="tail">
    <div>some line of text</div>
</div>
<button>Add Line</button>

var tailcounter = 100;
var tailswitch = false;

// scroll to bottom on init
tailScroll();

// add line to log
function tailappend() {
    $("<div />").text("log line " + tailcounter).appendTo("#tail");
    tailcounter++;
    tailScroll();
}

// auto update every second
var t = setInterval(tailappend, 1000);

// toggle updates button click
$("button").click(function (e) {
    e.preventDefault();
    switch (tailswitch) {
        case false:
            clearInterval(t); // turns off auto update
            tailswitch = true;
            alert("auto update off");
            break;
        case true:
            t = setInterval(tailappend, 1000); // restarts auto update
            tailswitch = false;
            alert("auto update on");
            break;
    }
});

// tail effect
function tailScroll() {
    var height = $("#tail").get(0).scrollHeight;
    $("#tail").animate({
        scrollTop: height
    }, 500);
}

#tail {
    border: 1px solid blue;
    height: 400px;
    width: 500px;
    overflow: hidden;
}