新しいアイテムが追加されたときにスクロールバーを自動的にプッシュする方法

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

私はこれを行うための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; 
} 

いますが、先頭に追加へのelemを必要とする代わりに、親に追加します。

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