スクロールで下からdivを追加する - チャットのアプリケーションの例

Question

下からdivを追加します。ある時点で垂直スクロールが始まるので、先に追加されたdivを見ることができます。私は典型的なチャット・アプリケーションを複製しようとしています。ここで私は、コードを置く前に、私は私がこれまで試した回避策のカップルを説明します

http://codepen.io/jareko999/pen/yaQmgk

... codepenです。ペンは現在、底部が0のコンテナを絶対に配置しています。問題は痛みですが、高さがビューポートの高さを超えると、スクロールしません。これは絶対配置の回避策の問題です。

私が試したもう一つの回避策は、100vhの高さで、両端に列が始まるように両端の両端にフレックスを表示することです。この問題は、スクロールが常に先頭から始まることです。私は解決策は、新しいdivが追加されるたびに下にスクロールするために作成したスクロール機能だと思います。これが最善の方法でしょうか？ここで重要な点は、古いdivにスクロールできるようにしたいが、新しいdivを下から開始することができるということです。スラックやメッセージなどの典型的なチャットアプリケーションを考えてみましょう。

HTML

<button onclick="myFunction()">Hey here's a box</button> 

<div id="container"> 
</div> 

CSS

body { 
    margin: 0; 
    width: 100%; 
} 

button { 
    position: fixed; 
    z-index: 10; 
} 

#container { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
} 

#box { 
    width: 100%; 
    background: tomato; 
    opacity: 0; 
    height: 100px; 
    transition: .2s; 
} 

#box:last-child { 
    opacity: 1; 
    height: 0; 
    animation: .2s height linear forwards; 
} 

@keyframes height { 
    to { 
     height: 100px; 
    } 
} 

#box:nth-last-child(2) { 
    opacity: .8; 
} 

#box:nth-last-child(3) { 
    opacity: .6; 
} 

#box:nth-last-child(4) { 
    opacity: .4; 
} 

#box:nth-last-child(5) { 
    opacity: .2; 
} 

JS

function myFunction() { 
    var box = document.createElement("div"); 
    box.setAttribute("id", "box"); 
    var container = document.getElementById('container'); 
    container.appendChild(box); 

    // window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); 

} 

私が一番下までスクロールして作成した関数よりもよりよい解決策はありますか？とても有難い。

Answer 1

私はいくつかのJSを使いこなして、それを理解しました。それが起こるとき、私は

http://codepen.io/jareko999/pen/yaQmgk

は私が一番下までスクロールするためのsetInterval関数を作成し...

ここcodepenだ...大好きです。

var myVar = setInterval(function(){ 
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); 
}, .1); 

この間隔は、すべての0.1秒を実行しますので、私は（昔のチャットメッセージなど）上記のdiv要素をスクロールするために、それを殺すために必要があるが、私は新しいdiv要素のアニメーションが（に来てほしいです） 終わる。そこでsetTimeout関数を作成してsetInterval関数を200ミリ秒で終了させました。

setTimeout(function(){ 
    clearInterval(myVar); 
}, 200);