如何在添加新元素时自动向下滚动？

// 获取容器元素
const container = document.getElementById('container');

// 创建新元素
const newElement = document.createElement('div');
newElement.textContent = '新元素';

// 添加新元素
container.appendChild(newElement);

// 设置滚动属性，使页面自动向下滚动
container.scrollTop = container.scrollHeight;

<style>
  .container {
    height: 400px;
    overflow: auto;
    scroll-behavior: smooth;
  }
</style>

<div class="container" id="container">
  <!-- 已存在的元素 -->
  <div>已存在的元素</div>
</div>

<script>
  const container = document.getElementById('container');

  const newElement = document.createElement('div');
  newElement.textContent = '新元素';

  container.appendChild(newElement);
</script>

<style>
  .container {
    height: 400px;
    overflow: auto;
  }
</style>

<div class="container" id="container">
  <!-- 已存在的元素 -->
  <div>已存在的元素</div>
</div>

<script>
  const container = document.getElementById('container');

  const newElement = document.createElement('div');
  newElement.textContent = '新元素';

  container.appendChild(newElement);
  
  newElement.scrollIntoView({ behavior: 'smooth', block: 'end' });
</script>