1

我是 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;
});
4

2 回答 2

2

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

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

例如，一条消息显示在他的正确 div 中，您可以使用此功能滚动到最后一条消息。

$("#show_messages").scrollTop($("#show_messages").children('div').last().offset().top);
于 2013-07-18T12:31:03.993 回答
-1

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.

于 2013-07-18T12:27:33.360 回答