将文本添加到前标记时保持滚动条向下答案

【问题标题】：Keep scroll bar down when text is added to pre tag将文本添加到前标记时保持滚动条向下
【发布时间】：2014-03-27 18:31:49
【问题描述】：

我不确定这是否可以使用 jQuery 来实现，但我正在开发一个使用 form 的 Web 终端（如 Web 腻子）将能够发送和获取消息（在浏览器中显示它们）从 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 代码以使该栏在添加文本时自动向下滚动？

谢谢

【问题讨论】：

内容应该在pre标签里面而不是外面。

标签： javascript jquery html

【解决方案1】：

您可以使用类似 jQuery 的方式滚动您的 <pre>，

jQuery( function(){
   var pre = jQuery("#output");
    pre.scrollTop( pre.prop("scrollHeight") );
});

这里是jsFiddle

【讨论】：

我会检查并通知您！
我可以在您的评论中添加一些信息吗？它已经奏效了，但是，为了适合我的具体问题的解决方案，每一行代码都应该放在 jquery 代码的不同函数中
您可以创建一个单独的函数，例如function scrollPre(){ var pre = jQuery("#output"); pre.scrollTop( pre.prop("scrollHeight") ); }，并在将文本附加到<pre/> 时调用。 :)
就是这样，添加文本时必须调用.prop，就这样Good！

【解决方案2】：

您可以将输出包装在几个 div 中，外部一个具有固定高度，overflow-x:scroll 第二个将保存您的响应。当您取回数据时，您将数据附加到内部数据，然后获得高度，然后您可以在外部数据上使用 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

【讨论】：