Javascript 如何在添加新项目时自动推动滚动条

请看看这个。如果将项目添加到#scroll div，滚动条是固定的-它只停留在“开始”处。我想要实现的是，当一个新项目被附加到父项时，自动移动滚动条。有可能通过CSS的魔力做到这一点吗？：）还是只有JS才能解决

代码：

HTML

JS

var scroll=$（'#scroll'）；
var addButton=$（“#添加”）；
var项目=1；
添加按钮。单击（函数（）{
scroll.append（`ITEM${ITEM}`）；
项目++；
});

---

谢谢你的建议

我已经更新了您的小提琴，演示了一种jQuery方法：

我刚刚使用scrollLeft添加了以下内容（如果需要，可以删除动画）：

addButton.单击（函数（）{
scroll.append（`ITEM${ITEM}`）；
项目++；
滚动动画({
scrollLeft:scroll.get（）[0]。scrollWidth
});
});

您可以使用css方向属性，设置为rtf！（从右到左）

但是您需要在元素前面加上前缀，而不是将其附加到父元素

---

没错！但我想我会添加一个jQuery替代方案，因为我知道有人可能会添加一个仅限于css的解决方案

<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>

#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;
}

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

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

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

 #scroll {
    ...
    direction: rtl;
}