Jquery load div auto scroll

Question

Jquery load div auto scroll

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

How to make scoll high when loading page?

I'm trying to do this, but to no avail!

File: messaging.php

$('.chatUsuariosLista').click(function() {
            idUsuario = this.id;
            $("#chatMsg").load('inc_chatMensagens.php?de='+idUsuario+'&para='+$("#para").val());
            $("#para").val(idUsuario);

            $('#chat2').attr({scrollTop: $('#chat2').attr('scrollHeight')});

        });

I tried to put the code $('#chat2').attr({scrollTop: $('#chat2').attr('scrollHeight')}); inside the file inc_chatMessages.php, but it also does not work.

File inc_chatMessages.php

<div id="chat2">
    <ul>
        <?php while ($row = $rs->fetch_assoc()) {?>

            <?php if ($_GET['de'] == $row['de']) {?>
                <li>
                    <div class="bubble">
                        <span class="personName">Cliente:</span> <br>
                        <span class="personSay"><?php echo $row['msg']; ?></span> <br>
                        <span class="time"><?php echo $row['data']; ?></span>
                    </div>
                </li>
            <?php }else{ ?>
                <li>
                    <div class="bubble2">
                        <span class="personName2">Você:</span> <br>
                        <span class="personSay2"><?php echo $row['msg']; ?></span><br>
                        <span class="time2"><?php echo $row['data']; ?></span>
                    </div>
                </li>
            <?php } ?>

        <?php } ?>
    </ul>
</div>

javascript jquery script

asked by anonymous 28.07.2017 / 04:41

2 answers

How to parse javascript error in Firefox DEV response CKEditor taking too long to load

score 0 · Answer 1

I was able to use CSS only. Searching found this comment link

Solution for anyone who has the same problem display: flex; and flex-direction: column-reverse;

<div class="row" id="chatMsg" style="padding: 7px; overflow-y: scroll;display: flex;flex-direction: column-reverse;"></div>

Thank you to all who have made themselves available.

score 0 · Answer 2

The function you are looking for is this :

function descer(){
  var elm    = $('.chat');
  var height = elm[0].scrollHeight;
  elm.scrollTop(height);
}

It will be responsible for getting its element of class chat , and soon after it will go to the end of the element (position obtained through height). Here is a test to check the result:

Original fiddle from the author: link

$(document).ready(function() {
  var wtf = $('.chat');
  var height = wtf[0].scrollHeight;
  wtf.scrollTop(height);
});

// Nota: Script foi colocado acima (<script>)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>functiondescer(){varelm=$('.chat');varheight=elm[0].scrollHeight;elm.scrollTop(height);}functionadd(){$("ul#mensagens").append("<li>Novo Item</li>");
    descer();
  }
</script>
<h3>Item Teste</h3>
<div class="chat" style="background-color: lightgray; height: 100px; overflow-y: scroll;">
  <ul id="mensagens">
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
    <li>Exemplo</li>
  </ul> <button onclick="add()">Adicionar</button>
</div>
<h3>Item Teste</h3>