스크롤 막대를 구현하는 방법

Question

저는 jquery와 javascript에 익숙하지 않고이 문제를 해결하는 방법을 모릅니다 : jquery 채팅을하고 id가 'show_messages'인 div가 있습니다. 모든 메시지를로드합니다. 내 아약스 요청에서. 모든게 잘 작동, 유일한 문제는, 그 표시 메시지에 대한 div가 길어지고 길어지고 나는 스크롤바를 구현하는 방법을 전혀 모른다. jquery 스크롤 기능을 사용하려고했지만 작동하지 않았고 올바르게 사용하는 방법을 모르겠습니다. 어떻게 페이스 북의 메신저 또는 비슷한 메신저에서 간단한 스크롤바를 만들 수 있습니다.

내 코드 :

<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

내가 AlternateScroll의 jQuery 플러그인 사용하는 것이 좋습니다 : http://www.dynamicdrive.com/dynamicindex11/facescroll/

그것은 매우 유용하고 당신은 쉽게 사용자 정의 할 수 있습니다. 희망이 도움이됩니다.

Answer 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);