Inverted Scroll, start at bottom [duplicate]

Question

Inverted Scroll, start at bottom [duplicate]

Navigation

#1 by (1 votes)

1

Good morning, I'm with the following doubt, I'm trying to do 1 chat, and whenever a message is received or sent, I wanted the scroll to be down, I'm using Meteor and I'm new to it, next

I have the following html code

<div class="chat">
         {{#each mensagens}}
            {{> list}}
         {{/each}}
       </div>

        <form class="Insert">
            <br> <br>
             <center>
                <input type="text" name="text"> <br><br>
                <input type="submit" value="Enviar">
            </center>
            <br>
        </form>

and the following code in JS

Template.chat.helpers({
 scroll: function(){
  var objDiv = document.getElementById("chat");
  objDiv.scrollTop = objDiv.scrollHeight;)
 }});

meteor

asked by anonymous 08.05.2018 / 15:43

1 answer

Query system Scraping parameters from a post method, with scrapy in python!

score 1 · Accepted Answer

This example I think might help you.

It starts from the bottom up and the scroll always stays in the base of the container

$('#chatmessages').scrollTop($('#chatmessages')[0].scrollHeight);

#chatbox {
    overflow:   none;
    position:   relative;
    width:      100%;
    height:     200px;
    border: 1px solid #ccc;
}
#chatmessages
{
    overflow:   auto;
    position:   absolute;
    bottom:     0;
    width: 100%;
    max-height: 200px;
}
#chatmessages div {
    border:1px solid #e2e4e3;
    border-radius: 5px;
    margin:5px;
    padding:10px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><divid="chatbox">
    <div id="chatmessages">
        <div>Hi </div>
        <div>Hello </div>
        <div>How are you ?</div>
        <div>I am fine, Thanks ! </div>
        <div>And how about you? </div>
    </div>
</div>

Font

Bonus: Gambeta to do with CSS only. This is a div rotated to be upside-down, then use direction:rtl to return the bar from scroll to right and text-align:left to adjust text (hint of @lazyFox = D). Then the content of the messages is rotated to the opposite to stay upside down.

.scrollable {
    transform-origin: 50% 50%; 
    transform: rotate(180deg); 
    border: 1px solid;
    width: 120px; 
    height: 120px; 
    overflow-y: auto;
    direction: rtl;
    text-align: left;
}
.message {
    padding: 0.5em;
}
.messages_wrap {
    float: left;
    width: 100%; 
    transform: rotate(180deg);
}

<div class="scrollable">
    <div class="messages_wrap">
        <div class="message">Your message1</div>
        <div class="message">Your message2</div>
        <div class="message">Your message3</div>
        <div class="message">Your message4</div>
        <div class="message">Your message5</div>
        <div class="message">Your message6</div>
        <div class="message">Your message7</div>
        <div class="message">Your message8</div>
        <div class="message">Your message9</div>
    </div>
</div>