Smooth Div Erweiterung und Scrollen, wenn Inhalt dynamisch hinzugefügt

Question

Ich habe ein Div, das Absätze zufällig eingefügt wird. Sobald die Größe des Div größer als sein Container ist, erstreckt es sich natürlich über den Container hinaus und erzeugt so Scrollbalken auf dem Container. Also dieser Teil ist in Ordnung. Der Container mit Bildlaufleisten ist nicht die Seite, die Bildlaufleisten erscheinen auf einem übergeordneten div

Das Problem kommt 2-fach. Wenn ein Absatz eingefügt wird, um das div größer zu machen, springt das div sofort zu der neuen Größe. Nach einigen Malen kann es schnell nervig werden. Das andere Problem ist, wenn das div über den Container hinausreicht, kann ich leicht Javascript verwenden, um den Container den ganzen Weg nach unten zu scrollen, aber noch einmal, es ist ein sofortiger Sprung, der nicht sehr angenehm ist, immer und immer wieder zuzusehen .

Ich bin auf der Suche nach einer Möglichkeit, dies zu glätten, haben das div zu erweitern, um den neuen Absatz zu umfassen und das Elternteil div scrollen reibungslos nach unten, wenn es vorbei reicht.

Es sollte auch beachtet werden, dass dies eine Elektron HTML5 App ist und als solche keine Notwendigkeit für Cross-Browser-Lösungen oder Browser-Kompatibilität. Nur eines, das in der neuesten Version von Chrom funktioniert. Es ist mir auch egal, ob die Lösung reines JavaScript oder Framework-basiert ist.

Ist das möglich und wenn ja, wie würde ich das umsetzen?

Answer 1

Sie können beide Probleme mit CSS und ein wenig js lösen. Choppy-Animationen können die Transparenz der Übergänge verbessern und die Höhe wird allmählich zu den neuen Werten wachsen, indem eine Klasse bei der Erstellung hinzugefügt wird.

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

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

Das Einfügen von Elementen sollten Sie, dass ohne jQuery Javascript smooth scroll WITHOUT the use of jQuery

ps hier sehen archivieren können durch eine glatte Scroll folgen: Ich bin das ich auf einem Handy zu schreiben, um nicht den Code überprüfen haben.