チャットを作っています。
メッセージを表示する部分をスクロールで常に一番下を表示させたいのです。
表示件数が少ない時は以下の状態で問題無いのですが、表示件数が増えてくるとスクロールが途中で止まってしまいます。
//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で質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- C言語・C++・C# プログラミングのペーパーテスト 実行結果を表示せよ #include <stdio.h> int h 1 2022/07/09 15:27
- C言語・C++・C# プログラミングのペーパーテスト 実行結果がどのように表示されるか答えよ #include <stdi 1 2022/07/09 14:27
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- PHP PHPを使って、別サイトの一部を取得して表示したいのです。。 1 2023/01/18 21:45
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- XML XML同じ名前の要素を自動で集約するツール 1 2022/04/11 09:21
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
バッチファイル 特定ウインドウ...
-
PDFを(htmlのように)無限に縦...
-
スライドを最後の画像で止めたい
-
入力フォームの値をQRコードで...
-
RPA(PowerAutomate)の実装について
-
jQueryを使いformでsubmitした...
-
ダブルクリックと2回クリックの...
-
Googleマップで何か見つけたも...
-
VBA コンボボックスの値をスピ...
-
JQuery、セレクトボックスをル...
-
GASでスプレッドシートの一番上...
-
二つのbxsliderをレスポンシブ...
-
以下のURL入れますか?皆さんは↓
-
画像のドットの部分が抜けてい...
-
Chinapost こよパズルどう動か...
-
非同期通信で掲示板を作る際の...
-
非同期通信を使うタイミングが...
-
PYTHONのtkinterについて
-
Pythonのtkinterについて
-
Pythonを勉強する道のり
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのgetでJSPを呼び出したい
-
要素内を常に一番下を表示させたい
-
【javascript文法】 prototype...
-
ローカルでのonreadystatechang...
-
jQueryで、複数条件の絞り込み機能
-
JQueryでAjax通信をキャンセル...
-
画面移遷なしで画像アップロー...
-
jqueryでリンクを無効にしたあ...
-
jqueryについて
-
繰り返し処理のシンプルな書き方
-
ある条件の画像のみ表示を切り...
-
jQuery 並列load処理
-
アコーディオンメニューについて
-
jqueryの関数?について
-
jqueryで読み込みが終わった画...
-
jQueryでloadしたページ内でもj...
-
jqueryで特定のIDに対して
-
AJAXでのリロードに関して
-
jqueryでテキストエリア監視に...
-
ドラッグ & ドロップでのド...
おすすめ情報
fujillin様
ありがとうございました。
>.message_cont の要素もスクロールさせる必要がある
これはスクロール指定してあります。
ごめんなさい。二つ目はよく理解できません。とりあえず参考にさせていただきます。