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

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

Posted at October 30,2014 1:33 AM
Tag:[jQuery]

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

1.問題点

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

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

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

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

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

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

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

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

3.サンプル

サンプルを作ってみました。ボタンをクリックすると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>
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)