Автоматический скролл вниз страницы, или как сделать эффект чата с сообщениями снизу вверх
Доброго времени суток господа, недавно возникла необходимость, написать сообщения с сортировкой от старых к новым, тоесть вверху старые внизу новые, чтобы это все автоматически скроллировалось вниз, ну в общем как в ВКонтакте, Одноклассниках и т.д.
Долгие поиски в гугль, ничего толком не дали, библиотек на js я не нашел, конечно были варианты с jQuery (считать суммарную высоту сообщений, или применять сразу большие значения), на Vue.js решение было, но я им не пользуюсь.. И вот я открыл для себя object.scrollIntoView который может прокрутить блок до указанного элемента.
Метод Element.scrollIntoView() интерфейса Element прокручивает текущий контейнер родителя элемента, так, чтобы этот элемент, на котором был вызван scrollIntoView() был видим пользователю.
Определимся с поставленной задачей
- Начальные сообщения при отсутствии прокрутки начинаются снизу
- При добавлении сообщения, блок прокручивался до этого элемента
Использовать будем
- CSS Flexbox
- JS Element.scrollIntoView()
Для начала нам необходимо, написать HTML контейнеры, которые нам понадобятся для нашего чата, с автоматической прокруткой сообщений. Пишем такой html код:
Пишем стили для минимального функционала нашего чата
.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
.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 не будет виден.
Так-же вы можете посмотреть ДЕМО или скачать архив с полным примером
Как сделать прокрутку страницы в html
Разрешить или запретить прокрутку страницы можно сделать с помощью элемента div и свойства overflow в CSS.
Например, создадим блок с классом scroll и применим к нему свойство overflow-y: scroll; :
class="scroll"> .scroll height: 200px; /* Высота блока */ overflow-y: scroll; /* Включаем вертикальную прокрутку */ > Теперь, если содержимое блока scroll превысит высоту блока, то появится полоса прокрутки, с помощью которой можно будет прокручивать содержимое.
Курсы javascript
Добрый вечер. Пишу чат для своего проекта, но никак не могу сделать автоматическую прокрутку скролла в iframe.
С горем пополам сделал автоматический подгон высоты под высоту окна браузера. Помогите пожалуйста сделать автоматическую прокрутку к самому нижнему сообщению чата. Перечитал кучу подобных вопросов, но не разобрался. Спасибо.
Бесконечная прокрутка вверх как в чате предыдущих сообщений
Друзья. Не могу решить проблему бесконечной прокрутки предыдущих сообщений в чате. Вроде работает, но выводит не правильно. Не в той последовательности. Решение где-то на поверхности, но блин. не могу решить. при нажатии на «Предыдущие сообщения» (#prev-mess) первый раз ajax подгружает блоки правильно — выше предыдущих #im-dialog-prev, а последующие нажатия вставляет ниже предыдущих, хотя хочется выше. Как это победить?
$(document).ready(function($) < $(".im-dialog").animate(< scrollTop: 20000000 >, "slow"); >); var block_show = false; function WatchMore() < var $target = $("#showmore-triger"); if (block_show) < return false; >var page = $target.attr("data-page"); page++; block_show = true; $.ajax( < url: "/new/im/ajax/previus_messages.php?id=26675&page=" + page, dataType: "html", success: function(data) < $(".im-dialog #im-dialog-prev").append(data); block_show = false; >>); console.log("/new/im/ajax/previus_messages.php?id=26675&page=" + page); $target.attr("data-page", page); if (page >= $target.attr("data-max")) < $target.remove(); >> $("#prev-mess").click(function() < WatchMore(); >);.im-dialog < height:300px; padding:0 8px 0 0; margin:16px -8px 16px 0; overflow:auto; >.im-dialog-left < float:left; max-width:85%; background-color:#f4f4f4; border-radius: 0 12px 12px 12px; padding:12px; border:1px solid #f0f0f0; >.im-dialog-right < float:right; max-width:85%; background-color:#FFFFFF; border:1px solid #f0f0f0; border-radius: 12px 0 12px 12px; padding:12px; >.clearer
предыдущие сообщения текст текст текст текст 2 текст3 текст4 текст 4 текст 4