'How to define the initial scroll position of scrollable div

I have a div card (bootstrap) in my project which contains messages from a chat. The new messages append below the old so, when the container is full the user can't see the new messages:

Before sending the message

After sending the message

The html code for this as follows:

<div class="scrollable" style="overflow-y:scroll; " >
        <div class="card-body" id="chat" >
            {% for m in messages %}
                <div class="message ' + source + '">
                    <strong> {{ m.user.first_name }} {{ m.user.last_name }}</strong>
                    <span class="date">  {{ m.timestamp }} </span>
                    {{ m.content }} 
                </div>
            {% endfor %}
        </div>
    </div>

I would like to automatically scroll down when card shows and whenever the user sends a new message.

Kind regards

htmlcsstwitter-bootstrapoverflowscrollable


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions