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
Post a Comment