javascript - how to implement a scrollbar -


i'm new jquery , javascript , have no idea how solve problem: have jquery chat , there div id 'show_messages' in load messages ajax request. works fine, problem ist, div show messages gets longer , longer , have absolutely no idea how implement scrollbar. tried use jquery scroll function, hasn't worked , don't know how use right. how can make simple scrollbar in facebook messenger or in similar messengers.

my code:

<div id="message_dialog" class="message_box">   <div id="show_messages"></div>   <div id="feedback"></div>   <form action="#" method="post" id="message_form">   <label>say something:</label>   <textarea id="message"></textarea>                                     <input type="submit" id="send_message" value="send message">   </form> </div> ...       $(document).ready(function(){       $('#start_conversation').click(function() {             $('#message_dialog').dialog();              var interval = setinterval(function() {           $.ajax({             type : "post",             url: 'get_messages.php',             success: function(data) {                 $('#show_messages').html(data);              }         });     }, 1000);     return false;   }); });  $('#message_form').submit(function() {         var username = ...     var message = ...      $.ajax({         type : "post",         url: 'send_message.php',         data: { 'username' : username, 'message' : message },          success: function(data) {             $('#feedback').html(data);                  $('#feedback').fadein('slow', function() {                     $('#feedback').fadeout(6000);                 });                          $('#message').val('');                   }     });     return false; }); 

setting max-height property , overflow-y auto doesn't solve problem ?

#show_messages{ max-height:200px; overflow-y:auto; } 

let's example message displayed within proper div, can scroll last message using function.

$("#show_messages").scrolltop($("#show_messages").children('div').last().offset().top); 

Comments