web-dev-qa-db-ja.com

HTMLコンテンツがjqueryを介してそれに追加されるときにdivを一番下までスクロールしたままにし、スクロールバーを非表示にする方法は？

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

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

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

enter image description here

私がjqueryまたはjavascriptでこれを行うことができる方法はありますか？

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

javascriptjqueryscrollscrollbar
14
Eric

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

div.scrollTop = div.scrollHeight;

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

30
dfsq

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

$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/

9
Josh Bedo

引き続きJavaScriptを使用してスクロールを行い、シミュレーターを含む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/ <-そして、テキストを下にスクロールしてください！

3
Andbdrew

div.scrollTop = div.scrollHeight;

しかし、あなたはoverflow: hidden。

0
Michael Bleidistel