小粋空間  -  a cheap joke and a play on words site

jQueryでテキストを追加するたびにスクロールさせる方法

jQueryでテキストを追加するたびにスクロールさせる方法を紹介します。

１．問題点

ログを出力するような感じで、あるエリアにテキストを1行ずつ追加していき、出力した最後の行にスクロールするようなことをやりたいのですが、方法が分かりません。

２．テキストを追加出力してスクロールさせる

まず、テキスト（コンテンツ）の追加はappend()で行います。

$("#log").append("コンテンツ");

次に、出力したエリアをスクロールさせるには次のように行います。

$("#log").scrollTop( $("#log")[0].scrollHeight );

scrollTopは要素の上端からのスクロール位置、scrollHeightはoverflowで画面上に表示されていない要素の内容も含め、全体の高さを示すものです。

つまり、要素の上端から要素の高さ分をスクロールさせています。

３．サンプル

サンプルを作ってみました。ボタンをクリックすると1行追加してスクロールします。

サンプルのコードは下記のとおりです。

<style>
#log {
    padding:5px;
    border:solid 1px #000;
    width:460px;
    height:150px;
    overflow:auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
    $("#send").click(function(){
        $("#log").append( $("#text").val() + "<br />" );
        $("#log").scrollTop( $("#log")[0].scrollHeight );
    });
});
</script>
<input id="text" type="text" value="" />
<input id="send" type="button" value="送信" />
<div id="log"></div>