Scroll otomatis dari bawah untuk fitur chat

ada yg tau bagaimana cara membuat scroll otomatis ke bawah untuk fiturchat menggunakan jquery?

Contoh

defoultnya kalau scroll itu kan dari atas ke bawah, tapi saya ingin balikan jadi dari bawah ke atas, karna untuk fitur chat.

$(document).on('click', '.start_chat', function(){
   var to_user_id = $(this).data('touserid');
   var to_user_name = $(this).data('tousername');

   make_chat_dialog_box(to_user_id, to_user_name);

   $("#user_dialog_"+to_user_id).dialog({
    autoOpen:false,
    width:400
   });

   $('#user_dialog_'+to_user_id).dialog('open');

   });

 function make_chat_dialog_box(to_user_id, to_user_name){

  var modal_content = '<div id="user_dialog_'+to_user_id+'" class="user_dialog" title="Anda Sedang Chat Dengan '+to_user_name+'">';
      modal_content += '<div style="height:300px; border:1px solid #ccc; overflow-y: auto; margin-bottom:24px; padding:16px;" class="chat_history" data-touserid="'+to_user_id+'" id="chat_history_'+to_user_id+'">';
      modal_content += muat_ulang_chat(to_user_id);
      modal_content += '</div>';
      modal_content += '<div class="form-group">';
      modal_content += '<textarea rows="2" cols="46" required name="chat_message_'+to_user_id+'" id="chat_message_'+to_user_id+'" class="form-control"></textarea>';
      modal_content += '</div><div class="form-group" align="right">';
      modal_content += '<button type="button" name="send_chat" id="'+to_user_id+'" class="btn btn-success send_chat">Send</button></div></div>';

     $('#user_model_details').html(modal_content);


 }

avatar abubakar
@abubakar

72 Kontribusi 19 Poin

Diperbarui 5 tahun yang lalu

Tanggapan

halo, coba bertanyanya diperjelas ya apa yang dimaksud

sudah bang hilman

automatisnya kapan? saat ada chat baru? atau apa eventnya?

iya bang pas buka chat otomatis scroll kebawah,karna datanya sy order by desc, langsung lihat chat terbaru

1 Jawaban:

Cara untuk scroll automatis ke bawah:

<pre> let chatList = document.getElementById("box") chatList.scrollTop = chatList.scrollHeight </pre>

saya ambil dari video ini <a href='https://sekolahkoding.com/kelas/laravel-vue-chat-app/video/memperbaiki-ux-chat'>ux laravel chat</a>

avatar hilmanski
@hilmanski

2686 Kontribusi 2135 Poin

Dipost 5 tahun yang lalu

Tanggapan

makasih bang hilman, bang kalau boleh tau kapan ke jakarta?

kalau versi jquery nya gmn?

@abubakar untuk apa butuh versi JQuery ?, Vanilla Javascript (pure javascript) lebih bagus kok

Login untuk ikut Jawaban