how to implement a scrollbar

Question

I'm new to jquery and javascript and have no idea how to solve this problem: I have a simply jquery chat and there is a div with the id 'show_messages' in which I load all the messages from my ajax request. All works fine, the only problem ist, that the div for show messages gets longer and longer and I have absolutely no idea how to implement a scrollbar. I tried to use the jquery scroll function, but I hasn't worked and I don't know how to use it right. How can I make a simple scrollbar like in the 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;
});

Answer 1

Setting a max-height property and overflow-y to auto doesn't solve the problem ?

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

Let's say for example that a message is displayed within his proper div, you can scroll to the last message by using this function.

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

Answer 2

I suggest to use AlternateScroll jquery plugin: http://www.dynamicdrive.com/dynamicindex11/facescroll/

It's very useful and you can easily customize it. Hope this helps.