1

Topic: Is CSS-ninja?

There is a tape of messages.
Fresher - appear from below.
Well and, it is necessary that they (messages) from below appeared.
Strangely enough, all was got from a half-turn.
With here such here simple CSS.

.messages {
flex-grow: 2;
overflow-y: scroll;
display: flex;
flex-direction: column-reverse;
}

It works, together with animation VUE - messages float from below - an eye not .
Problem in that sometimes it does not work. The tape is not scrolled. The message appears, but it - behind a visible zone.
If outside the limits of any logic if  wound off a tape on the middle and added the message it is necessary that the tape was smoothly wasted in the beginning (downwards).
This moment "added the message" - at me is and is itself DOM-element. What manipulations can be made to reach effect?
How to make on JS - I know, but about any smoothness speech does not go in this case that .

2

Re: Is CSS-ninja?

If in chrome to ungear/include

flex-direction: column-reverse;

With great reserve it is possible to count that for result achievement (the tape becomes in the beginning) from a JS-code it any more does not work.

3

Re: Is CSS-ninja?

I to a campaign ninja

.messages {
flex-grow: 2;
overflow-y: scroll;
display: flex;
flex-direction: column-reverse;
scroll-behavior: smooth;
}

And

_el.scrollTop = _el.scrollHeight;

Here so!