Автоматический скролл вниз страницы, или как сделать эффект чата с сообщениями снизу вверх

Доброго времени суток господа, недавно возникла необходимость, написать сообщения с сортировкой от старых к новым, тоесть вверху старые внизу новые, чтобы это все автоматически скроллировалось вниз, ну в общем как в ВКонтакте, Одноклассниках и т.д.

Долгие поиски в гугль, ничего толком не дали, библиотек на js я не нашел, конечно были варианты с jQuery (считать суммарную высоту сообщений, или применять сразу большие значения), на Vue.js решение было, но я им не пользуюсь.. И вот я открыл для себя object.scrollIntoView который может прокрутить блок до указанного элемента.

Метод Element.scrollIntoView() интерфейса Element прокручивает текущий контейнер родителя элемента, так, чтобы этот элемент, на котором был вызван scrollIntoView() был видим пользователю.

Определимся с поставленной задачей

1. Начальные сообщения при отсутствии прокрутки начинаются снизу
2. При добавлении сообщения, блок прокручивался до этого элемента

Использовать будем

• CSS Flexbox
• JS Element.scrollIntoView()

Для начала нам необходимо, написать HTML контейнеры, которые нам понадобятся для нашего чата, с автоматической прокруткой сообщений. Пишем такой html код:

<div class="wrap_Scrollbottom"> 
    <div class="container_Scrollbottom" id="containerScroll">
        <div class="messages" id="messages"></div>
        <div class="wrapper_Scrollbottom"></div>
    </div>
</div>

Пишем стили для минимального функционала нашего чата

.wrap_Scrollbottom — Это будет наш основной блок, с фиксированной высотой, для того, чтобы дочерний мы могли позиционировать.
.container_Scrollbottom — Этот блок мы сделаем с автоматической, но максимальной высотой в 100%, и сделаем его прокручиваемым.
.messages — Именно в него, будут попадать сообщения.
.wrapper_Scrollbottom — А этот будет нашим хелпером, для скроллинга, он не будет отображаться, но будет играть важную роль для работы чата.

/**
* Высота основного блока фиксированная
* Flexbox с позиционированием контента внизу блока
*/ 
.wrap_Scrollbottom {
    width: 500px; 
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid #b9b9b9;
    position: relative;
}

/**
* Максимальная высота этого блока должна быть 100% 
* По достижении 100% появится скролл 
* Блок позиционируется внизу родительского блока
*/ 
.container_Scrollbottom {
    padding: 0 10px;
    max-height: 100%;
    overflow-y: auto;
}

/**
* Пока нет сообщением показываем это
*/ 
.messages:empty::before {
    content: 'Нет сообщений';
    display: block;
    padding: 20px;
    text-align: center;
    color: gray;
}

/**
* Оформляем немного наши сообщения
*/ 
.message {
    border: 1px solid #d0d0d0;
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    background-color: beige;
}

.wrap_Scrollbottom — Это будет наш основной блок, с фиксированной высотой, для того, чтобы дочерний мы могли позиционировать.
.container_Scrollbottom — Этот блок мы сделаем с автоматической, но максимальной высотой в 100%, и сделаем его прокручиваемым.
.messages — Именно в него, будут попадать сообщения.
.wrapper_Scrollbottom — А этот будет нашим хелпером, для скроллинга, он не будет отображаться, но будет играть важную роль для работы чата.

Теперь нужно добавить JS кода немного, чтобы при вставке новых сообщений, скролл прокручивал контент в самый низ.

/**
* Функция будет прокручивать страницу, 
* пока не будет виден селектор .wrapper_Scrollbottom
* При добавлении нового элемента в .messages вызываем функцию lastMessageScroll('smooth');
*/ 
function lastMessageScroll(b) {
    var e = document.querySelector('.wrapper_Scrollbottom');
    if (!e) return ; 
    
    e.scrollIntoView({
        behavior: b || 'auto',
        block: 'end',
    });
}

Теперь при вставке сообщения, вызываем функцию lastMessageScroll(‘smooth’); и блок будет прокручен в самых низ, пока блок с классом wrapper_Scrollbottom не будет виден.

Так-же вы можете посмотреть ДЕМО или скачать архив с полным примером