scrollTopスプライト値の変更はすぐに

Question

を設定した後、私はいくつかの簡単なマークアップを持っている...

垂直フレキシボックスとしてスタイル

<div class="container"> 

    <div id="conversation">...</div> 

    <div class="keyboard">...</div> 

</div> 

...

.container { 
    margin: 1em 1em 0; 
    max-width: 30em; 
    margin-left: auto; 
    margin-right: auto; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    height: 100vh; 
} 

#conversation { 
    overflow-y: scroll; 
    box-sizing: border-box; 
    margin-bottom: auto; 
    flex: 1 1 80%; 
} 

.keyboard { 
    padding: 2rem; 
    box-sizing: border-box; 
} 

そして、私は単純に.conversationのスクロール位置を移動したいです下にいっぱい：

var scrollConvo = function() { 
    var convo = document.getElementById('conversation'); 
    console.log('scrollTop', convo.scrollTop); // scrollTop 174 
    console.log('scrollHeight', convo.scrollHeight); // scrollHeight 426 
    convo.scrollTop = convo.scrollHeight; 
    console.log('scrollTop', convo.scrollTop); // scrollTop 252 
} 

しかし、これは期待どおりに動作しません。スクロール位置は移動しますが、一番下まで移動するわけではありません。 console.logステートメントの横にあるコメントのように、値はではなく、になっています。私はその結果の価値について何の説明もしていません。 scrollTop 426はなぜですか？

アップデート1 私は私が何をしたいん作業jsfiddleを作ったが、それが動作する理由私はわからないが、鉱山はしていません：http://jsfiddle.net/khj4903t/48/

Answer 1

まあ、scrollHeightは、要素の実際のコンテンツの高さであります。

一方、scrollTopは、実際に発生したスクロールの量です。

要素の高さがscrollHeightより小さい場合、スクロールバーが表示されます。許容されるスクロール範囲は、0〜（要素の高さ - スクロールの高さ）です。

要素の高さは100ピクセルで、内容は250ピクセルです。したがって、150ピクセルは隠されています（、scrollTopで利用可能）。

• 素子高さ：100pxに
• scrollHeight：250ピクセル
• 初期scrollTopスプライト：0

それが底に到達する前に要素が150個の画素に対してスクロールすることができます。これを高い値に設定すると、最大値に設定されます。したがって、250に設定すると150に設定されます。