将文本添加到预标记时，保持滚动条向下。
将文本添加到预标记时，保持滚动条向下。
提问于 2014-03-27 18:31:49
我不确定是否可以用jQuery实现这一点，但是我正在开发一个web终端(就像一个web putty)，使用form可以从ssh服务器发送和获取消息(在浏览器中显示它们)。然后，当我从命令执行中得到输出时(从ssh服务器发送到nodeJS服务器，然后发送到我的浏览器)，文本将被添加到使用pre标记设置的文本框中。
<body style="margin:100">
<div id="terminal-1" class="tab-pane active">
<pre id="output" style="height:300px; overflow: auto;"></pre>
^--- This one
<div class="row-fluid">
<div class="span6">
<form id="myForm" class="form-inline" onsubmit="return false;">
<input type="text" class="input-large" style="width:70%" name="command" placeholder="Enter Command" autocomplete="off">
<button id="execute" class="btn">Go!</button>
</form>
</div>
</div>
</div>
<! some code continues...-->然后，所有命令输出都被插入到pre标记中，这会使框被重载(不知道这是否是正确的术语)并开始放下文本，在右侧创建一个栏，查看图片(用红色标记)：
因此，最后一个问题是，在添加文本时，我应该添加哪些jQuery代码来自动滚动条形图？
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-03-27 18:43:32
您可以使用类似于<pre>的jQuery滚动jQuery，
jQuery( function(){
var pre = jQuery("#output");
pre.scrollTop( pre.prop("scrollHeight") );
});这是jsFiddle
Stack Overflow用户
发布于 2014-03-27 19:06:40
您可以将输出封装在两个div中，外部div具有固定的高度和溢出x:滚动第二个div将保存您的响应。当您拿回数据时，将数据附加到内部的数据中，然后得到数据的高度，然后可以在外部的数据上使用scrollTop和内部的高度。
这是一个例子
html
<div style="height: 100px; overflow-x:scroll;" id="console">
<div id="console-content">
</div>
</div>
<form id="form">
<input type="text" id="text">
</form>javascript
$(function(){
var $form = $('#form'),
$console = $('#console');
$content = $('#console-content'),
$text = $('#text');
$('form').submit(function(event){
var height;
$content.append('<pre>' + $text.val() + '</pre>');
height = $content.height();
$console.scrollTop(height);
$text.val('');
event.preventDefault();
})
});你可以在这里看到活生生的例子。
http://plnkr.co/edit/A1Okwk1r6zZW4XXdehWq?p=preview
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22696242
复制相关文章
相似问题
腾讯云开发者
