Problème pour descendre a fond une scrollbar

Bonjour, j'essaye en vain de faire descendre une scroll bar automatiquement mais celle ci ne veut pas descendre a fond après l'envoie d'un message en ajax.

j'actualise aussi mon div qui est contenu dans la scrollbar pour effectuez un chat.

Voici mon code :

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script>
        $(function(){
              $("#formsupport").submit(function(){
              $('#formsupport').fadeOut();
              $("#loader").show();
              optionsRadios = $(this).find("input[name=optionsRadios]").val();
              message = $(this).find("textarea[name=message]").val();
              username = $(this).find("input[name=username]").val();
              ip = $(this).find("input[name=ip]").val();

              $.post("trait-843d/traitement.php", {optionsRadios: optionsRadios, message: message, username: username, ip: ip}, function(data){
                $("#loader").hide();
                if(data!="ok"){
                  $(".error").empty().append(data);
                } else {
                  $('#formsupport').fadeIn();
                  $('#textarea_support').attr('value', '');
                  $('#ajax-refresh').load("<?php echo BASE_URL;?>support/support-mess.php?username=<?php echo $_SESSION['auth']->username; ?>");
                  document.getElementById('scroll').scrollTop = document.getElementById('scroll').scrollHeight;
                }
              });
              return false;
            });
        });
        $(function(){
          setInterval(function(){
            $('#ajax-refresh').load("<?php echo BASE_URL;?>support/support-mess.php?username=<?php echo $_SESSION['auth']->username; ?>");
          }, 500);
        });
        window.onload = function(){
          complete: document.getElementById('scroll').scrollTop = document.getElementById('scroll').scrollHeight;
        }
    </script>

Et voici le code de ma scrollbar :

<div id="scroll" style="height:300px;overflow:auto">
    <div id="ajax-refresh" class="messages messages-img">
        <?php
            if($support){
                while($data = $support_content->fetch()){
            ?>
        <div class="item in item-visible">
            <div class="image">
                <img src="<?php echo $data->photo; ?>">
            </div>
            <div class="text">
                <div class="heading">
                    <a href="#"><?php echo $data->prenom . ' ' . $data->nom; ?></a>
                    <span class="date"><?php echo $data->date_ajout . ' ' . $data->heure_ajout ?></span>
                </div>
                <?php echo($data->message); ?>
            </div>
            </div>
            <?php }}  ?>                                          
    </div>
</div>

Alor au chargement de la page la scrollbar descend tout en bas, mais quand j'envoie un message je vois quels descend tout en bas puis remonte pour cacher le dernier message. Pouvez vous m'aidez ?

Amicalement, fabien