另一个有趣的方法是使用纯CSS，使用flex-direction方法，该方法通过为滚动元素 * 内部 * 的内容创建一个 Package 器来工作。
我在下面做了一个快速的演示（有一个按钮和一些添加新项目的JavaScript），你也可以看看this separate demo-page。
诀窍在于在滚动条中使用column-reverse来反转内容的方向。因为项目在另一个容器中，所以它们不会被"翻转"，而是总是排到底部。事实上，这使得滚动条在添加内容时滚动到底部。

额外奖励：保持滚动位置

还有，这也是我很喜欢这个方法的地方每当用户开始滚动（向上）时，滚动条在添加内容时不会丢失其滚动位置。因此，如果滚动条已经滚动（默认情况下，或由用户）到底部，它只会"粘"到底部。这确保了没有恼人的内容跳跃，提供了更好的用户体验。

演示

let scrollerContent = document.getElementById('scrollerContent');

document.getElementById('addItems').addEventListener('click', function() {
  let newChild = scrollerContent.lastElementChild.cloneNode(true);
  newChild.innerHTML = "Item " + (scrollerContent.children.length + 1);
  scrollerContent.appendChild(newChild);
});

.scroller {
overflow: auto;
height: 100px;
display: flex;
flex-direction: column-reverse;
}

.scroller .scroller-content .item {
  height: 20px;
  transform: translateZ(0); /* fixes a bug in Safari iOS where the scroller doesn't update */
}

<div class="scroller">
  <div class="scroller-content" id="scrollerContent">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
  </div>
</div>
<br/><br/>
<button id="addItems">Add more items</button>

您可以使用scrollTop来实现它。
我简单的写了一个例子供大家参考，大家会发现实现scrollTop有两种方法，一种是使用动画 Package 器，另一种是直接使用，大家可以比较一下两种方法的区别。

const sendMessage = (selector, isAnimate = true) => {
  const text = $(selector).val();
  const $container = $('.form-container');
  $container.append(`<p>${text}</p>`);
  if (isAnimate) {
    $container.animate({
      scrollTop: $container.prop('scrollHeight')
    }, 1000);
  } else {
    $container.scrollTop($container.prop('scrollHeight'));
  }
  $(selector).val('');
};

$('button:eq(0)').on('click', function() {
  sendMessage('input[type=text]');
});

$('button:eq(1)').on('click', function() {
  sendMessage('input[type=text]', false);
});

.form-container {
  width: 400px;
  height: 100px;
  padding: 10px;
  background-color: white;
  overflow: scroll;
  position: relative;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<div class='form-container'>
  <p>This is line 1 of text</p>
  <p>This is line 2 of text</p>
</div>
<div>
  <input type='text' placeholder="Type a message.">
  <button type='button'>Use animation</button>
  <button type='button'>Don't use animation</button>
</div>

这对我很有效：

outputArea[0].scrollTop = 9e9;