javascript - 添加新元素时如何自动插入滚动条

Question

请查看此 fiddle .如果您将元素添加到#scroll div，则滚动条是固定的——它只是停留在“开始”处。我想要实现的是在将新元素附加到父项时自动移动滚动条。是否可以通过 CSS 的魔力来做到这一点？ :)) 还是只有 JS 才能解决？

代码:

HTML

<div id="scroll">
   <div class="addElement">FIRST</div>
   <div class="addElement"></div>
   <div class="addElement">LAST</div>
</div>
<button id="add">ADD NEW ELEMENT</button>

CSS

#scroll {
overflow: auto;
overflow-y: hidden;
width: 200px;
height: 150px;
background: red;
position: relative;
display: flex;
align-items: center;
}

.addElement {
  margin: 5px;
  height: 60px;
  width: 55px;
  background: green;
  flex: 0 0 auto;
}

JS

var scroll = $('#scroll');
var addButton = $('#add');

var item = 1;
addButton.click(function() {
    scroll.append(`<div class="addElement">ITEM ${item}</div>`);
  item++;
});

感谢您的任何建议!

Answer 1

我已经更新了您的 fiddle 以演示执行此操作的 jQuery 方法:

https://jsfiddle.net/93gz3u1L/11/

我刚刚使用 scrollLeft 添加了以下内容(如果需要，您可以删除动画):

addButton.click(function() {
    scroll.append(`<div class="addElement">ITEM ${item}</div>`);
  item++;
  scroll.animate({
    scrollLeft: scroll.get()[0].scrollWidth
  });
});