Question

我是jquery和javascript的新手，并且不知道如何解决这个问题：我有一个简单的jquery聊天，并且有一个id为'show_messages'的div，我在其中加载了来自我的ajax请求的所有消息。一切正常，唯一的问题是，显示消息的div越来越长，我完全不知道如何实现滚动条。我试图使用jquery滚动功能，但我没有工作，我不知道如何正确使用它。如何在Facebook 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);

Answer 2

我建议使用AlternateScroll jquery插件： http://www.dynamicdrive.com/dynamicindex11/facescroll/

它非常有用，您可以轻松自定义它。希望这可以帮助。

如何实现滚动条

2 个答案: