Postingan lainnya
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);
}
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>