Scroll from a certain point with jquery

Question

Good evening... I have a div which is the chat window with the following settings:

<div class="container" id="chat-rbox">
    <div class="row">
        <div class="Area chatlist bg-light">
            <!--area de mensagens -->
        </div>
    </div>
</div>

    .Area {
        height: 400px;
        margin: 0 auto;
        width: 100%;
        background-color: white;
        display: table;
        padding: 5px;
        border-radius: 5px;
        margin-bottom: 10px;
    }

When I send the message I would like it to start scrolar from when the messages reached the end of the height. I tried to assemble a very basic Jquery to try to accomplish this, but it always goes to the end from the first message.. Would anyone have any idea how to start scrolling only when it reaches 400px?

  function scrollParaFim() {
                    scrollTop: $('#chat-rbox')[0].scrollHeight
                }, 500);

        })

Answer 1

Dude if I understand or need jQuery for this, one technique you can do is use flex with column-reverse to do the scroll start from bottom to top and use max-heigth: 400px with overflow-Y: auto, thus the container does not have minimum height, but has maximum height, and from that maximum height it is 400px the scroll will appear.

Follow the image code above

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.Area {
    max-height: 400px;
    margin: 0 auto;
    width: 100%;
    background-color: white;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;

    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    right: 0;
    border: 1px solid #000;
}

.Area > div {
    display: flex;
    flex-direction: column;
}

<div class="container" id="chat-rbox">
    <div class="row">
        <div class="Area chatlist bg-light">
            <div>
                <p>msg 001</p>
                <p>msg 002</p>
                <p>msg 003</p>
                <p>msg 004</p>
                <p>msg 005</p>
                <p>msg 006</p>
                <p>msg 007</p>
                <p>msg 008</p>
                <p>msg 009</p>
                <p>msg 010</p>
            </div>
        </div>
    </div>
</div>