チャットを作っています。
メッセージを表示する部分をスクロールで常に一番下を表示させたいのです。
表示件数が少ない時は以下の状態で問題無いのですが、表示件数が増えてくるとスクロールが途中で止まってしまいます。
//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を探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
バッチファイル 特定ウインドウ...
-
ダブルクリックと2回クリックの...
-
PDFを(htmlのように)無限に縦...
-
GASでスプレッドシートの一番上...
-
入力フォームの値をQRコードで...
-
VBA ディレクトリ名をワイルド...
-
生コンの立米数の出し方
-
b75h2-m2 biosアップデートした...
-
チャットを作る
-
VBAでクイズゲームの作り方
-
以下のURL入れますか?皆さんは↓
-
画像のドットの部分が抜けてい...
-
Chinapost こよパズルどう動か...
-
非同期通信で掲示板を作る際の...
-
非同期通信を使うタイミングが...
-
PYTHONのtkinterについて
-
Pythonのtkinterについて
-
Pythonを勉強する道のり
-
Pythonを無料(安価)で学ぶ方...
-
RPA(PowerAutomate)の実装について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
要素内を常に一番下を表示させたい
-
ローカルでのonreadystatechang...
-
AJAXでのリロードに関して
-
jQuery 並列load処理
-
jqueryでリンクを無効にしたあ...
-
【javascript文法】 prototype...
-
jqueryを使って非同期通信で10...
-
JQueryでAjax通信をキャンセル...
-
jQueryで、複数条件の絞り込み機能
-
jqueryのgetでJSPを呼び出したい
-
jqueryについて
-
ある条件の画像のみ表示を切り...
-
Javascriptを使ってQRコード読...
-
JavaScriptでtabindexの変更っ...
-
二つのbxsliderをレスポンシブ...
-
readyStateが4にならない原因
-
階層別の組織図の自動作成について
-
[jQuery UI] sortableを使いaja...
-
JavascriptからPHPへのAjax通信...
-
AjaxでJSONを受信すると、文字...
おすすめ情報
fujillin様
ありがとうございました。
>.message_cont の要素もスクロールさせる必要がある
これはスクロール指定してあります。
ごめんなさい。二つ目はよく理解できません。とりあえず参考にさせていただきます。