javascript - 使用 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;
}