Question

请查看此fiddle。如果您将项目添加到#scroll div，则滚动条是固定的 - 它只是停留在＆＃34;开头＆＃34;。我想要实现的是在将新项目追加到父项时自动移动滚动条。是否有可能通过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

我已经更新了你的小提琴来演示这样做的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
  });
});

Answer 2

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

 #scroll {
    ...
    direction: rtl;
}

但您需要预先元素，而不是将其附加到父级。

https://jsfiddle.net/k6Lhv3u6/1/

添加新项目时如何自动按滚动条

2 个答案: