16

以下に、さまざまなコマンド ツール用の小さな js ベースのシミュレーターを示します。ユーザーがコマンドを入力し、それが正しい場合は上部に表示されます。今後の使用のために、シミュレーションを完了する前に、必要な数のコマンドを処理できることを確認する必要があります。これは、必然的にコンテンツがあふれてしまうことを意味します。

私の解決策は、ユーザーが入力するたびに前のコンテンツの下にコンテンツが追加されるため、Y オーバーフローを auto に設定し、スクロールバーを追加し、クライアントを常に出力 div の一番下までスクロールし続けるための小さな jquery を追加することでした。正しいコマンド。

スクロールバーを削除したい場合を除いて、これは今のところ問題なく動作します。スクロールバーが表示されないことを除いて、オーバーフローオートと同じようにコンテンツが動作するようにしたいと思います。

ここに画像の説明を入力

jqueryまたはjavascriptでこれを行う方法はありますか?

z-indexを使用してスクロールバーにある種の黒を配置するためにいくつかのcssトリックを実行できることは知っていますが、可能であればそれを避けたいと思います。

4

4 に答える 4

34

必要なのはoverflow: hidden、コンテナに追加して、コンテンツがロードされたらスクロールするだけです。

div.scrollTop = div.scrollHeight;

デモhttp://jsfiddle.net/nT75k/2/

于 2013-03-28T17:56:07.443 に答える
9

はい、イベントリスナーを追加できます。そのイベントが発行されたら、高さを確認して下にスクロールできます。

$container = $('.container');
$container[0].scrollTop = $container[0].scrollHeight;

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $container = $('.container');
    $container.append('<p class="row">' + e.target.value + '</p>');
    $container.animate({ scrollTop: $container[0].scrollHeight }, "slow");
  }
});

http://jsfiddle.net/w2qbe/

于 2013-03-28T17:48:46.443 に答える
3

引き続き JavaScript を使用してスクロールし、シミュレーターを含む div を別の div 内に配置します。この div は幅がわずかに狭くなり、外側の div にオーバーフローが隠されます。私はこのテクニックを数回使用しましたが、とても楽しいです。

注意すべき唯一のことは、ブラウザによってスクロールバーの幅がわずかに異なることです。

例えば：

html:

<div id="outside">
    <div id="inside">
        <div>more content 1</div>
        <div>more content 2</div>
        <div>more content 3</div>
        <div>more content 4</div>
        <div>more content 5</div>
        <div>more content 6</div>
        <div>more content 7</div>
        <div>more content 8</div>
        <div>more content 9</div>
        <div>more content 8</div>
        <div>more content 7</div>
        <div>more content 6</div>
        <div>more content 5</div>
        <div>more content 4</div>
        <div>more content 3</div>
        <div>more content 2</div>
        <div>more content 1</div>
    </div>
</div>

CSS:

div#outside {
    width: 120px;
    height: 100px;
    overflow: hidden;
}

div#inside {
    width: 135px;
    height: 100px;
    overflow-y: auto;
}

このフィドルをチェックしてください-> http://jsfiddle.net/5bkz5/1/ <-テキストを下にスクロールしてください!

于 2013-03-28T17:49:53.737 に答える