2

私は<pre>html 要素とそれに追加するテキスト ボックスを持っています。テキストボックスに書き込むと、テキストは pre 要素に表示されます (端末ウィンドウのように) が、私の問題は、入力したテキストが pre 要素の高さの終わりに達すると、新しいテキストが下から消えることです。ナビゲーションのないメッセージ ボックスとして想像できるので、次の新しい行はシーンの外に出て、古い行だけが表示されます。ページあたりの最大行を数えて、最初に追加された行を一番上から削除するにはどうすればよいですか? 仕事の例を知っていますか？それは jsfiddle です: http://jsfiddle.net/LQg7W/2133/しかし、私が入力したものは pre 要素には表示されません。

<div class="row">
  <div class="large-12 columns" style="background: #222; height: 70vh;">
  <pre id="terminalPre" width="2">
    <code id="terminal" style="color: #fff; padding: 1em;" ></code>
  </pre>
  <input type="text" id="textInput" name="" style="background: #222; position: absolute; bottom: 0; color: #fff;">
  </div>
</div>
4

1 に答える 1

2

CSSで解決することをお勧めします。divスタイルにを追加し、 overflow:hiddenjQuery を使用して一番下までスクロールできます。

リビングデモ: http://jsfiddle.net/s4FyM/1/

divをスクロールするにはjqueryが必要です:

$('.box').scrollTop($('.box')[0].scrollHeight);
于 2013-09-13T08:58:42.643 に答える