javascript - 如何实现滚动条

Question

我是 jquery 和 javascript 的新手，不知道如何解决这个问题:我有一个简单的 jquery 聊天，并且有一个 id 为“show_messages”的 div，我在其中加载来自 ajax 请求的所有消息。一切正常，唯一的问题是，显示消息的 div 变得越来越长，我完全不知道如何实现滚动条。我尝试使用jquery的滚动功能，但没有成功，不知道如何正确使用。我怎样才能制作一个简单的滚动条，就像在 facebook Messenger 或类似的 Messenger 中一样。

我的代码:

<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

将 max-height 属性和 Overflow-y 设置为 auto 并不能解决问题？

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

假设一条消息显示在其适当的 div 中，您可以使用此功能滚动到最后一条消息。

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