Smooth Div expansion and scrolling when content dynamically added

Question

I have a div that gets paragraphs randomly inserted into it. Once the size of the div gets bigger than its container, it of course extends past the container thus creating scrollbars on the container. So that part is ok. The container with scrollbars is not the page, the scrollbars appear on a parent div

The problem comes in 2-fold. When a paragraph is inserted to make the div larger, the div makes an instant jump to the new size. After enough times it can get annoying quickly.

The other problem is when the div extends past the container, I can easily use javascript to scroll the container all the way down but, once again, its an instant jump which isn't very pleasant to watch over and over again.

I'm looking for a way to smooth this out, have the div expand smoothly to encompass the new paragraph and have the parent div scroll smoothly down if its extends past it.

It should also be noted that this is an electron html5 app and as such theres no need for cross-browser solutions or browser compatibility. Just one that works in the latest bleeding-edge version of chrome. I also don't care if the solution is pure javascript or framework-based.

Is this possible and if so how would I implement that?

score 0 · Answer 1 · answered Jun 12 '17 at 16:49

You can solve both issues with CSS and a little js. Choppy animations can benifit from transitions opacity and height would grow gradually to the new values by adding a class at creation.

.box { 
    opacity: 0;
    height: 1px;  
    transition: opacity 2s, height 2s; 
} 

.box.loading {
     opacity: 1;
     height: 200px;
 }

The insertion of elements should be followed by a smooth scroll you can archive that without jQuery see here Javascript smooth scroll WITHOUT the use of jQuery

ps: i'm writing this on a phone so i did not check the code.

Smooth Div expansion and scrolling when content dynamically added

1 Answers1