第一部分：jQuery实现滚动栏一直处于最底部
相信大家有时候在展示一些实时数据展示并且数据量非常大的时候，由于无法在同一页面看到最有效的数据，所以我们须要将滚动栏至于底部。以便我们看到最须要的数据和信息。这里非常明显的样例那拿windows的ping来说吧，当我们长ping的时候，这时候数据会越来越多，并且还是累加的，新数据又所有在后面，所以这个时候让滚动栏一直处于底部就大有作为了！
大伙能够看一下，在windows的cmd中运行ping 地址 -t。这时候就会一直ping，刚开始的时候，数据可能比较小，同一屏就能看到
但时间一长。数据就越来越多，同一屏根本就无法看到，并且最有效的数据都在最底部，所以这个时候我们应该看到的是底部最想看到的数据
仅仅要我们把滚动栏处于底部。就达到我们的效果了。！
好啦。不多说了，先给大家看一下小实例，是以textarea和div来做的demo：
<textarea id="testScroll1" style="width:300px; height: 200px;border: 1px #ccc solid; resize:none;">
</textarea>
<div id="testScroll2" style="width:300px; height: 200px;border: 1px #ccc solid; overflow-y: scroll;float: left;">
</div>
<input type="button" value="Start" onclick="start();">
<input type="button" value="Stop" onclick="stop();">这是我们须要的那个模拟的html元素，接下来才是关键：
var count = 1000;
function start(){
$("#testScroll1").html('');
$("#testScroll2").html('');
timeBox = setInterval(function(){
$("#testScroll1").append('number:['+count+']--->I Love You\n')
var scrollTop = $("#testScroll1")[0].scrollHeight;
$("#testScroll1").scrollTop(scrollTop);
$("#testScroll2").append('number:['+count+']--->I Love You<br/>')
$("#testScroll2").scrollTop($("#testScroll2")[0].scrollHeight);
count--;
if(count == 0){
clearInterval(timeBox);
count = 1000;
}
},1000);
}
function stop(){
count = 1000;
clearInterval(timeBox);
}demo中的细节没有处理。还有请各位见谅，各位理解意思即可了。总结起来就是一句话：
$("#dom_id").scrollTop($("#dom_id")[0].scrollHeight);这里提醒一下各位，假设效果没有出来，请注意元素是否超找对了。
展示效果给大伙儿看看：
这部分转自jQuery实现滚动栏一直处于最底部
第二部分：实战展示
将上面代码汇总
index.html
<html>
<body>
<textarea id="testScroll1" style="width:300px; height: 200px;border: 1px #ccc solid; resize:none;"></textarea>
<div id="testScroll2" style="width:300px; height: 200px;border: 1px #ccc solid; overflow-y: scroll;float: left;"></div>
<input type="button" value="Start" onclick="start();">
<input type="button" value="Stop" onclick="stop();">
<script>
var count = 1000;
function start(){
$("#testScroll1").html('');
$("#testScroll2").html('');
timeBox = setInterval(function(){
$("#testScroll1").append('number:['+count+']--->I Love You\n')
var scrollTop = $("#testScroll1")[0].scrollHeight;
$("#testScroll1").scrollTop(scrollTop);
$("#testScroll2").append('number:['+count+']--->I Love You<br/>')
$("#testScroll2").scrollTop($("#testScroll2")[0].scrollHeight);
count--;
if(count == 0){
clearInterval(timeBox);
count = 1000;
}
},1000);
}
function stop(){
count = 1000;
clearInterval(timeBox);
}
</script>
</body>
</html> 很明显这个在没有后端数据的情况下并无法展示滚动栏一直处于最底部的功能
我们可以看另一个demo
index2.html
<html>
<body>
<textarea rows="10" cols="20" id="my">
</textarea>
<button onClick="test()">test</button>
<script>
var i = 1;
function test()
{
var obj = document.getElementById("my");
obj.value += i + "\n";
i++;
obj.scrollTop = obj.scrollHeight; // good
}
</script>
</body>
</html> 这个demo通过不断在textarea 标签中加文字的方式实现滚动栏一直处于最底部的功能（这个比较直观）
注意：
<textarea> 标签里只能显示文字（ps：如果里面有HTML的标签也是以文字形式展示）
<div> 标签里可以将HTML的标签转化为页面显示出来，可以显得更加整齐、美观
实际上我是想实现将后台的日志实时显示在前端的功能，且返回的数据中有HTML标签（ps：比如</br>）,所以最终选择用<div> 来实现日志显示功能（后台数据是用vue.js来交互的，后面有时间可以给大家做个详解）
简单展示一下我做的东西吧
<table>
<tbody>
<tr>
<td>日志：</td>
<td>
<div id="logs" v-html="device.logs" style="width:465px; height: 300px;border: 1px #ccc solid; overflow-y: scroll;float: left;">
</div>
</td>
</tr>
</tbody>
</table>
function refreshlogs() {
if(document.getElementById('getlogbtn').textContent == "开始"){
deviceDetail.device.logs = "";
console.log("开始抓取日志...");
//var obj = document.getElementById('logs');
ws2 = new WebSocket(WSURL2)
ws2.onclose = function () {
console.log('ws2 onclose', arguments)
}
ws2.onerror = function () {
console.log('ws2 onerror', arguments)
}
ws2.onmessage = function (message) {
deviceDetail.device.logs += message.data;
console.log('msg got:' + message.data);
document.getElementById('logs').value += message.data
//是否自动在底部滚动
//obj.scrollTop = obj.scrollHeight;
var scrollTop = $("#logs")[0].scrollHeight;
$("#logs").scrollTop(scrollTop);
}
ws2.onopen = function () {
console.log('ws2 onopen', arguments)
}
document.getElementById('getlogbtn').textContent = "停止"
deviceDetail.device.getlog = "停止"
}else{
ws2.close();
console.log("停止抓取日志...");
document.getElementById('getlogbtn').textContent = "开始"
}
}
效果如下
