コンテンツが動的に追加されたときのスムースDiv拡張とスクロール

Question

私は段落をランダムに挿入するdivを持っています。 divのサイズがそのコンテナよりも大きくなると、それはもちろんコンテナを超えて拡張され、コンテナ上にスクロールバーが作成されます。その部分は大丈夫です。 スクロールバーを含むコンテナはページではなく、スクロールバーは親divに表示されます

問題は2倍になります。 divを大きくするために段落を挿入すると、divは新しいサイズに瞬時にジャンプします。十分な時間が経過すると、すぐに迷惑になることがあります。

もう1つの問題は、divがコンテナを越えて伸びたときに、javascriptを使用してコンテナをすべてスクロールさせることができますが、もう一度、 。

これを滑らかにする方法を探しています。divをスムーズに展開して新しい段落を囲み、親divのスクロールをスムーズにしてからスクロールさせます。

これは電子html5アプリであり、クロスブラウザソリューションやブラウザとの互換性は必要ありません。最新の最新版のクロムで動作するのはちょうど1つです。ソリューションが純粋なjavascriptまたはフレームワークベースであるかどうかは気にしません。

これは可能ですか？その場合はどうすれば実装できますか？

Answer 1

CSSと少しjsの両方の問題を解決できます。不安定なアニメーションでは、トランジションの不透明さを避けることができます。高さは、作成時にクラスを追加することによって、新しい値に徐々に増加します。私は、コードをチェックしませんでしたので、私は電話でこれを書いている：

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

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

要素の挿入は、あなたがjQueryのなしでここJavascript smooth scroll WITHOUT the use of jQuery

PSを見ることをアーカイブすることができ、滑らかなスクロールが続くべきです。