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

Question

Please check out this fiddle . If you add items to the #scroll div, the scroll-bar is fixed - it just stays at the "beginning". What I want to achieve is to move scroll-bar automatically when a new item is being appended to the parent. Is it possible to do this via magic of CSS? :)) Or only JS gonna solve it?

Code:

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++;
});

Thank you for any suggestion!

Answer 1

I've updated your fiddle to demonstrate a jQuery method of doing this:

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

I just added the following using scrollLeft (You can remove the animation if needed):

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

Answer 2

You can use the css Direction property, setted to rtf! (right to left)

 #scroll {
    ...
    direction: rtl;
}

but you will need to prepend the elem instead of append it to the parent.

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