CSS+JS. Как сделать автоскролл?

Question

[TechNOIR]

Доброго времени товарищи знатоки!!
Тут представлен проект чат бокса с ботом.
Все бы ничего, но обнаружил что когда переписываешься с ботом и блок сообщений подходит к концу то я вижу свое отправленное сообщение,а ответ бота не вижу. Но проскроллив вниз немного вижу его.
Как сделать чтобы всегда автоскролл был вниз?
Есть идеи товарищи? Спасибо заранее

Comments

[carrneggi]

Подскажи пожалуйста как ты решил эту задачу? снизу человек тебе написал но он наверно заходил на твой сайт который сейчас не доступен(

Answer 1

[EEclipsEE]

В вашей функции send_message добавьте в конце строку

$("#converse").scrollTop($("#converse").prop("scrollHeight"));

Comments

[TechNOIR]

EEclipsEE Спасибо большое! Работае, но чуть скрола все равно остается, нельзя до упора как-то воплотить?

[EEclipsEE]

TechNOIR, если прям заморачиваться, то можно написат отдельную функцию которая до упора скролить будет. То есть при добавлении ответа бота, она смотрит всю высоту окна чата, и скролит на максимум. (код не напишу, но идея думаю ясна). Ну или если хотите что бы окошко полность показывалось а не скрол именно, то последнему сообщению с левой тороны делайте margin-bot в пару пикселей(скролл не будет докручивать возможно но за счет марджина оно будет прям полностью торчать). Тут уже играть можно как угодно.

[TechNOIR]

EEclipsEE, Спасибо за ответ! я добавил последнему блоку сообщения слева :last-child. Но теперь он все блоки слева сччитает как last-child. Как задать бы чтобы первый блок был first-child?

Сделал так:

.message-box.left-img .mes:first-child{
  margin-bottom:0px;
}

.message-box.left-img .mes:last-child{
  margin-bottom:20px;
}

Но не сработало

[EEclipsEE]

TechNOIR, не в вашем смлучае надо добавлять не к mes, а ко всему контейнеру(с сообщением и картинкой), у вас это .left-img:last-child.