Сделать полосу прокрутки

[Q_BASIC]

Приветствую,

Есть визуализация бота, надо полосу прокрутки сделать. Желательно свою, но можно и стандартную браузерную (дальше уже разберусь).

Код:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[MaxiSoft]

полный косяк в скрипте проблема в том что нужно для елемента animate-messages-block делать стили { overflow-y: scroll; height: 400px;} и убрать ту хрень которая делает подъем на верх блока.

 

[Q_BASIC]

полный косяк в скрипте проблема в том что нужно для елемента animate-messages-block делать стили { overflow-y: scroll; height: 400px;} и убрать ту хрень которая делает подъем на верх блока.

А так тогда делать чтобы последние сообщения внизу были? И если даже 1 сообщение, оно не сверху было, а снизу

 

[MaxiSoft]

вот такой код будет


//console.log(400-block.height());

//var height = block.height();

//console.log(height);
//block.css({'margin-top': 400-block.height()});
container.scrollTop(container.prop('scrollHeight'));

 

[Q_BASIC]

вот такой код будет


//console.log(400-block.height());

//var height = block.height();

//console.log(height);
//block.css({'margin-top': 400-block.height()});
container.scrollTop(container.prop('scrollHeight'));

Для просмотра ссылки Войди или Зарегистрируйся

Первое сообщение сверху чата, а надо его вниз

 

[MaxiSoft]

ничего не понял что не так, сравни 2 страницы первую и вторую при ставке нового сообщения скроллится все вверх, что не так?

 

[Q_BASIC]

ничего не понял что не так, сравни 2 страницы первую и вторую при ставке нового сообщения скроллится все вверх, что не так?

Сравни 2 картинки:
Для просмотра ссылки Войди или Зарегистрируйся - первое сообщение сверху (не надо так)
Для просмотра ссылки Войди или Зарегистрируйся - первое сообщение снизу (надо так)

 

[MaxiSoft]

уговорил помогу вот стиль

.animate-messages {
display: flex;
flex-direction: column-reverse; /* 'column' for start, 'column-reverse' for end */
overflow-y: scroll; /* or overflow-y: auto ... */
width: 100%;
max-width: 600px;
height: 400px;
background: #fff;
font-family: -apple-system,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif;
line-height: 18px;
font-weight: 400;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 13px
}

Для просмотра ссылки Войди или Зарегистрируйся