Как сделать авто прокрутку в блоке?

Вопрос-ответ HTML/CSS
1

Есть блок, в который пользователи посылают сообщения, если сообщений много, то нужно самому прокручивать вниз.

Chat Team - Общайся! 
<div id="block-main">       

    <div id="wrapper">

        <header class="header">

            <!-- Лого -->

            <a id="block-logo" href="http://localhost:3000/">

                <img src="#" alt="logo" id="logo">

            </a>

            <!-- Пользователей онлайн -->

            <span id="users-online">Пользователей онлайн: </span>

        </header>

        <!-- Блок всех сообщений -->

        <div class="mainForm">

            <div id="all-messeges">

                <div class="animation">

                    <div class="animation-block">

                        <h2>Ошибка</h2><br/>

                        <p>Введите значение</p>

                    </div>

                </div>

            </div>

            <!-- Форма для сообщений -->

            <div class="container">

                <form id="form">

                    <input type="text" name="name" id="name" maxlength="15" placeholder="Введите имя">

                    <br>

                    <textarea name="message" id="message" placeholder="Введите сообщение..."></textarea>

                    <br>

                    <input type="submit" value="Отправить">

                </form>

            </div>

        </div>     

        <!-- Блок команд пользователей -->

        <div id="teamUsers">

            <button id="teamUsers__btn">Создать команду</button>

            <form id="createTeam">

                <div id="wrapper2">

                    <label for="nameTeam">Название команды</label>

                    <br />

                    <input type="text" name="nameTeam" maxlength="20" placeholder="Команда №1" id="nameTeam">

                    <br />

                    <input type="submit" id="createTeam__btn" value="Готово">

                </div>

            </form>

            <button id="teamUsers__cancelBtn">Отмена</button>

            <button id="cancelBtn2">Отмена</button>

            <div id="wrapper3">

                <div id="displayTeam">

                    <div class="displaySettings">

                        <span id="exit">выйти</span>

                    <h1 id="nameTeam-heading"></h1>

                    </div>

                </div>

                <div id="displayTeam__container">

                    <form id="displayTeam__form">

                        <input type="text" name="name" id="name2" maxlength="15" placeholder="Введите имя">

                        <br>

                        <textarea name="message" id="message2" placeholder="Введите сообщение..." maxlength="200"></textarea>

                        <br>

                        <input type="submit" id="displayTeam__btn" value="Отправить">

                    </form>

                </div>

            </div>

        </div>

    </div>

</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="/socket.io/socket.io.js"></script>

<script>

$(function() {

    // Сообщения

    let socket = io.connect();

    let $form = $("#form");

    let $name = $("#name");

    let $textarea = $("#message");

    let $allMessages = $("#all-messeges");

    let animation_block = document.getElementsByClassName('animation-block');

    // Онлайн пользователей

    // const ws = new WebSocket('ws://localhost:3000');

    // const placeMessage = document.getElementById('users-online');

    // Создание команд

    let cancelBtn2 = document.getElementById('cancelBtn2');

    let wrapper3 = document.getElementById('wrapper3');

    let $name2 = $("#name2");

    let $textarea2 = $("message2");

    let displayTeamBtn = document.getElementById('displayTeam__btn');

    let teamBtn = document.getElementById('teamUsers__btn');

    let teamUsersCancelBtn = document.getElementById('teamUsers__cancelBtn');

    let $createTeam = $('#createTeam');

    let $nameTeam = $('#nameTeam');

    let $displayTeam = $('#displayTeam');

    let $displayTeamForm = $('#displayTeam__form');

    let displayTeamContainer = document.getElementById('displayTeam__container');

    let createTeamBtn = document.getElementById('createTeam__btn');

    let wrapper2 = document.getElementById('wrapper2');

    let mes = document.getElementsByClassName('mes');

    let $nameTeam_heading = $('nameTeam-heading');

    let exit = document.getElementById('exit');

    // Подсветка сообщений пользователей

    let min = 1;

    let max = 5;

    let randomColor = Math.floor(Math.random() * (max - min)) + min;

    // Для глобального чата

    let additionalClass;

    switch (randomColor) {

        case 1:

            additionalClass = 'green';

            break;

        case 2:

            additionalClass = 'pink';

            break;

        case 3:

            additionalClass = 'red';

            break;

        case 4:

            additionalClass = 'blue';

            break;

        case 5:

            additionalClass = 'orange';

            break;

    }

    // Для чата команд

    let additionalClass2;

    switch (randomColor) {

        case 1:

            additionalClass2 = 'green';

            break;

        case 2:

            additionalClass2 = 'pink';

            break;

        case 3:

            additionalClass2 = 'red';

            break;

        case 4:

            additionalClass2 = 'blue';

            break;

        case 5:

            additionalClass2 = 'orange';

            break;

    }

    // Функция для кнопки

    $form.submit(function(event) {

        // Блокировка перезагрузки страницы

        event.preventDefault();

        // Условия для сообщений

        if ($textarea.val() === "" || $name.val() === "" || $textarea.val() === "" && $name.val() === "") {

            $(animation_block).toggleClass('animation-error');

        }

        else {

            socket.emit('send mess', {mess: $textarea.val(), name: $name.val(), additionalClass: additionalClass});

            $textarea.val('');

        }

    });

    // Добавка сообщений в блок

    socket.on('add mess', function(data) {

        $allMessages.append("<div class='mes color-" + data.additionalClass + "'><p id='nick'>" + data.name + ":</p>" + data.mess + "</div>");

    });

    // Команды

    $createTeam.submit(function(event) {

        // Блокировка перезагрузки страницы

        event.preventDefault();

        // Условия для названия команды

        if (nameTeam.value === '') {

            $(animation_block).toggleClass('animation-error');

        }

        else {

            wrapper3.style.display = "block";

            displayTeamContainer.style.display = "block";

            wrapper2.style.display = "none";

            displayTeam.style.display = "block";

            teamUsersCancelBtn.style.display = "none";

            cancelBtn2.style.display = "block";
            teamBtn.style.display = "none";
            $displayTeamForm.css({"display": "block"});
        }
    });
    // Кнопки отмена
    exit.onclick = () => {
        $(displayTeam).fadeOut(100);
        $(wrapper3).fadeOut(100);
        $(wrapper2).fadeIn(100);
    };
    cancelBtn2.onclick = () => {
        wrapper2.style.display = "none";
        cancelBtn2.style.display = "none";
        teamBtn.style.display = "block";
    };
    $displayTeamForm.submit(function(event) {
        // Блокировка перезагрузки страницы
        event.preventDefault();
        // Условия для сообщений
        if ($textarea2.val() === "" || $name2.val() === "" || $textarea2.val() === "" && $name2.val() === "") {
            $(animation_block).toggleClass('animation-error');
        }
        else {
            socket.emit('send mess2', {mess2: $textarea2.val(), name2: $name2.val(), additionalClass2: additionalClass2});
            $textarea2.val('');
        }
    });
    // Добавка сообщений в блок команды
    socket.on('add mess2', function(data2) {
        $displayTeam.append("<div class='mes color-" + data2.additionalClass2 + "'><p id='nick'>" + data2.name2 + ":</p>" + data2.mess2 + "</div>")
    });
    // Кнопка команд
    teamBtn.onclick = () => {
        createTeam.style.display = 'block';
        teamUsersCancelBtn.style.display = "block";
        wrapper2.style.display = "block";
    };
    teamUsersCancelBtn.onclick = () => {
        nameTeam.value = '';
        createTeam.style.display = 'none';
        teamUsersCancelBtn.style.display = "none";
    };
    // Онлайн пользователей
    // function setStatus(value) {
    //     placeMessage.innerHTML = value;
    // }
    // function printMessage(value) {
    //     const li = document.createElement('li');
    //     li.innerHTML = value;
    //     placeMessage.appendChild(li);
    // }
    // ws.onopen = () => setStatus('Online');
    // ws.onclose = () => setStatus('Disconnected');
    // ws.onmessage = response => printMessage(response.data);
});
</script>
2

element.scrollTop

?