overflow-yでdivを強制的に最新表示する（divの一番下）

Question

あなたの行動について最新の状態に保つはずのアクションログを作成しました。だから、ボタンをクリックするたびに、あなたが行ったことが示されますが、問題は自動的に最新のメッセージを表示しないことです。ボタンをクリックするたびに最新のメッセージを表示することは可能ですか？

JSfiddle：https://jsfiddle.net/a8ey2ucm/1/

<div id="log"> 

</div> 

<button onclick="actionBtn();"> 
    Click here 
</button> 

function actionBtn() 
{ 
    var log = document.getElementById('log'); 
    var action = document.createElement("p"); 
    var actionNode = document.createTextNode("You have rolled"); 

    action.appendChild(actionNode); 
    log.appendChild(action); 
} 

Answer 1

私は、ウェブ上で、このための無数の答えがあると思います。しかし、

function actionBtn() 
{ 
    var log = document.getElementById('log'); 
    var action = document.createElement("p"); 
    var actionNode = document.createTextNode("You have rolled"); 

    action.appendChild(actionNode); 
    log.appendChild(action); 

    log.scrollTop = log.scrollHeight; 
}