![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
チャットを作っています。
メッセージを表示する部分をスクロールで常に一番下を表示させたいのです。
表示件数が少ない時は以下の状態で問題無いのですが、表示件数が増えてくるとスクロールが途中で止まってしまいます。
//JS
function dojQueryAjax() {
$.ajax({
type: "GET",
url: "page_ajax.php",
cache: false,
success: function (data) {
$('#ajaxreload').html(data);
},
error: function () {
alert("通信エラー");
}
});
}
window.addEventListener('load', function () {
setTimeout(dojQueryAjax, 0);
setInterval(dojQueryAjax, 5000);
$('.message_cont').delay(100).animate({
scrollTop: $(document).height()
},100);
});
//HTML
<div id="ajaxreload" class="message_cont">
<!-- ここからpage_ajax.php -->
<div class="ajaxReturn">
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
</div>
<!-- ここまでpage_ajax.php -->
</div>
//CSS
.message_cont {
max-height: 400px;
overflow-y: scroll;
}
こういった場合は、どうすればいいでしょう?
ご教示いただけないでしょうか?
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
こんばんは
確認できる環境がないので、ご質問文をざっとながめただけですが・・・
2ヶ所ほど問題があるように思われます。
一つ目は、documentの最下部までスクロールするような記述はありますが、チャットの内容が増加した場合には、CSSで .message_cont の高さを制限している関係で、したの方の書き込みは表示されない状態になっているように思えます。
.message_cont の要素もスクロールさせる必要があるのではないでしょうか。
二つ目は(上記にも関連しますが)、新しい書き込みが下に追加されるものと仮定するなら、.message_contをスクロールする記述を内容を書替える毎に行うようにしておく必要があるということになります。
具体的には、ajaxの更新処理の一環として記述しておく必要がありそうです。
ご参考まで。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
要素内を常に一番下を表示させたい
-
ローカルでのonreadystatechang...
-
Javascriptを使ってQRコード読...
-
同一ページ移動時ハンバーガー...
-
readyStateが4にならない原因
-
Doctrineのjoinについて
-
階層別の組織図の自動作成について
-
Selenium4でボタンをクリックで...
-
[jQuery UI] sortableを使いaja...
-
SQLのmaxで求めた値を変数に代...
-
VBAでIEのHTMLタグの要素を操作...
-
Selenium Basicの件
-
JQueryで動的生成のスライダが...
-
親フレームの存在確認
-
たくさんの経由地がある巡回ル...
-
<SCRIPT src="css.js">の記述位置
-
Javascriptの勉強初めました!
-
スライドを最後の画像で止めたい
-
プルダウン内容に応じてラジオ...
-
クリックテキストを次ページに表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JQueryでAjax通信をキャンセル...
-
要素内を常に一番下を表示させたい
-
ローカルでのonreadystatechang...
-
jqueryで読み込みが終わった画...
-
繰り返し処理のシンプルな書き方
-
多数のCPUを使い同期処理をした...
-
画面移遷なしで画像アップロー...
-
jQueryで、複数条件の絞り込み機能
-
Javascriptを使ってQRコード読...
-
SQLのmaxで求めた値を変数に代...
-
JavaScriptでtabindexの変更っ...
-
階層別の組織図の自動作成について
-
JavascriptからPHPへのAjax通信...
-
カンマ区切りのデータを配列に...
-
インラインフレームを自動更新...
-
Selenium Basicの件
-
jQueryのblockUIをformのボタン...
-
jQueryを使いformでsubmitした...
-
フレーム内の要素へのXPATHはど...
-
二つのbxsliderをレスポンシブ...
おすすめ情報
fujillin様
ありがとうございました。
>.message_cont の要素もスクロールさせる必要がある
これはスクロール指定してあります。
ごめんなさい。二つ目はよく理解できません。とりあえず参考にさせていただきます。