Jquery load div auto scroll

Asked

Viewed 1,092 times

1

How to make high scoll when loading the page?

I’m trying to do this, but without success!

File: messages.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 inc_chatMensagens.php file, but it also doesn’t work.

inc_chatMensagens.php file

<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

  • Maybe you’re looking for the function .scrollIntoView()?

  • @Mateusa. I saw that it doesn’t work in most browsers.

  • I didn’t send you an answer necessarily for that. Your question is a bit confusing, do you want to make the scroll climb to the top, or even some other message? If it goes straight to the top, this reply can help you (Beyond animation). However if it is for a defined element, select it and run the function, example: document.getElementById("bubble").scrollIntoView();, could test to see if everything is in order?

  • @Mateusa. I’m trying to keep the scroll always down as in chat where messages appear and scroll down automatically.

  • I know you’re using elements like li to identify the messages by the code you deleted, so try using this: $("html,body").animate({scrollTop: $('ul#mensagens li:last').offset().top}); (based in that post) In this case I used ul#mensagens, then you must add a id="mensagens" for your type element ul.

  • Here is an example: http://jsfiddle.net/GEsmb/155/

  • @Mateusa. Good morning. It worked in part...rsrs. It is running all over the screen and not only in the div scoll.

  • Yes, I’m sorry... I understood the question differently. I’m going to publish it as an answer now...

Show 3 more comments

2 answers

0

The function you seek is that one:

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

She will be responsible for getting her class element chat, and then go to the end of the element (position obtained through the height). Here is a test to check the result:

Original fiddle of the author: http://jsfiddle.net/y430ovjt/

$(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>
  function descer() {
    var elm = $('.chat');
    var height = elm[0].scrollHeight;
    elm.scrollTop(height);
  }

  function add() {
    $("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>

0

I got it using only CSS. Searching I found this comment https://stackoverflow.com/a/44051405/3939389

Solution for those who have 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>

I thank everyone who made themselves available.

Browser other questions tagged javascript jquery script

You are not signed in. Login or sign up in order to post.