CSSスクロールバーが追加されたコンテンツで自動スクロール

Question

固定幅と高さでdivを持っています。 Divには順序付けられていないリストがあり、css overflow-y: scrollというプロパティがあります。 javascriptでは、ユーザーがリストの下にあるボタンをクリックするとトリガーする関数があり、その関数は1つのリスト項目を追加します。 divの中にコンテンツが多すぎると、リストの最後に新しいリスト項目が追加され、新しいリスト項目を表示するためには、リストをスクロールする必要があります。何らかの形でスクロールバーの自動スクロールを新しいコンテンツの追加とともに行うことができるので、最後に追加されたリストアイテムは常に表示されますか？

HTML：

<ul id="scroll"> 
    <li>a</li> 
    <li>b</li> 
    <li>c</li> 
</ul> 
<button type="button" id="click">Click</button> 

のCss：

ul { 
    height: 100px; 
    width: 100px; 
    overflow-y: scroll; 
    border: 1px solid black; 
} 

Javascriptを：

function addListItem(){ 
    var message = document.createElement('li'); 
    message.innerHTML = 'd'; 

    document.getElementById('scroll').appendChild(message); 
} 

document.getElementById('click').addEventListener('click', addListItem, true); 

JSフィドルリンク：SCのElement.scrollTopプロパティを設定しhttps://jsfiddle.net/8gjhatvt/2/

Answer 1

divをページ内の新しい要素の位置+新しい要素の親のオフセットに置き換えます。

document.getElementById('scroll').scrollTop = message.offsetHeight + message.offsetTop; 

の作業フィドル：https://jsfiddle.net/rvnj6mc3/

Answer 2

addListItem（）関数にこのコードを追加します。addListItem（）関数で例えば

は、以下の行を追加します

var scroll=document.getElementById("scroll"); 
scroll.scrollTop = scroll.scrollHeight;