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

Question

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

有谁知道任何JavaScript或jQuery库可以帮助我吗？我是一个JavaScript的初学者，所以任何有关如何解决这个问题的建议都将非常感激。

Answer 1

我做了一个简单的例子，你

http://jsfiddle.net/manuel/zejCD/1/

// some demo data 
 
for(var i=0; i<100; i++) { 
 
    $("<div />").text("log line " + i).appendTo("#tail") 
 
} 
 

 
// scroll to bottom on init 
 
tailScroll(); 
 

 
// add button click 
 
$("button").click(function(e) { 
 
    e.preventDefault(); 
 
    $("<div />").text("new line").appendTo("#tail"); 
 
    tailScroll(); 
 
}); 
 

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="tail"> 
 
    <div>some line of text</div> 
 
</div> 
 

 
<button>Add Line</button>

Answer 2

这里是一个很好的解决方案

它使用Ajax请求，和HTTP范围：标题只需要最后~30KB的日志文件。然后它会查询附加到该文件的数据，并且只会检索新数据（不刷新整个文件，甚至最后30KB）。也处理文件截断。

https://github.com/ukhas/js-logtail#readme

Answer 3

我已经更新曼努埃尔面包车Rijn的的脚本包括一个定时器和一个拨动开关，有一些小的改动日志行一起。希望这可以帮助。 http://jsfiddle.net/5rLw3LoL/

HTML：

<div id="tail"> 
    <div>some line of text</div> 
</div> 
<button>Add Line</button> 

JS：

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); 
} 

CSS：（格式化重要）

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

Answer 4

这可以用CSS通过简单地翻转外实现与使用内部容器transform: rotateX(180deg);https://jsfiddle.net/tnrn6h59/2/

这里唯一的问题是滚动也是颠倒过来的，而不是移动的问题。