powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Есть CSS-ninja?
3 сообщений из 3, страница 1 из 1
Есть CSS-ninja?
    #39605803
Агнец за бортом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Есть лента сообщений.
Более свежие - появляются снизу.

Ну и, нужно чтобы они (сообщения) снизу появлялись.

Как ни странно, завелось всё с полоборота.

С вот такой вот нехитрой CSS-кой.

Код: css
1.
2.
3.
4.
5.
6.
.messages {
  flex-grow: 2;
  overflow-y: scroll;
  display: flex;
  flex-direction: column-reverse;
}



Это работает, вкупе с анимацией VUE - сообщения всплывают снизу - глаз не нарадуется.

Проблема в том, что иногда это не работает. Лента не прокручивается. Сообщение появляется, но оно - за видимой зоной.

Если вне рамок какой-то логики, если юзел отмотал ленту на середину и добавил сообщение, то надо чтобы лента ПЛАВНО промоталась в начало (вниз).

Этот момент "добавил сообщение" - у меня есть и есть сам DOM-element. Какие манипуляции можно сделать, чтобы достигнуть эффекта?

Как сделать на JS - я знаю, но ни о какой плавности речь не идёт в этом случае, что неприемлимо.
...
Рейтинг: 0 / 0
Есть CSS-ninja?
    #39605816
Агнец за бортом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Если в хроме выключить/включить

Код: css
1.
 flex-direction: column-reverse;



То с натяжкой можно посчитать за достижение результата (лента становится в начало), то из JS-кода это уже не работает..
...
Рейтинг: 0 / 0
Есть CSS-ninja?
    #39605839
Агнец за бортом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Я сам походу ninja
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
.messages {
  flex-grow: 2;
  overflow-y: scroll;
  display: flex;
  flex-direction: column-reverse;

  scroll-behavior: smooth;
}



и

Код: javascript
1.
 _el.scrollTop = _el.scrollHeight;



Вот так-та!
...
Рейтинг: 0 / 0
3 сообщений из 3, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Есть CSS-ninja?
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]