javascript - 如何控制div的水平滚动？

我有一个固定大小的div，它会逐渐添加越来越多的内容，并获得水平滚动条。我想要的是能够随时随地将滚动条一直推到右侧，这样我就可以始终使最新添加的内容可见，从而将较旧的内容向左移动。但是，如果不使用jQuery（对于一个功能来说似乎很愚蠢），我似乎无法找出实现此目的的方法。

最佳答案

尝试将div的scrollLeft设置为scrollWidth。

例如

document.getElementById("btnAdd").onclick = function() {

  var divContent = document.getElementById("divContent");
  divContent.innerHTML += "<span>some stuff </span>";
  divContent.scrollLeft = divContent.scrollWidth;

};

#divContent {
  overflow-x: auto;
  overflow-y: hidden;
  height: 50px;
  width: 300px;
  white-space: nowrap;
}

<div id="divContent"></div>
<button id="btnAdd">add</button>