How do I auto scroll in Angular?

I got a dynamic component, where I add material cards horizontally. After a few cards, the component gets filled, and I can scroll the component. But how can I make it auto scroll horizontally, so that I don't have to use the mouse all the time?

I already tried playing with some css attributes like overflow and so on.

.blocksWrapper {
  display: flex;
  overflow: auto;
  min-height: 305px;
}

I expect, that it autoscrolls horizontally.

This is how it should look like:

But instead it never scrolls automatically.

There is no automatic feature to auto scroll a div when the size changes.
I suppose you dynamically add your cards using some button? Then you could scroll programatically when adding a card!

Here are multiple suggested solutions:

• You can use jquery's method "scrollLeft()". Just set the horizontal scroll to something like 99999 to be sure it goes as far possible.
• Change the default scrollTo() behavior of your html element (see this thread).
• Use the css directive direction: rtl to set the default scroll bar position to the right (see this thread)

Here is an example using the solution 2) : https://angular-dfjmej.stackblitz.io

Maybe it's not the exact render you want, but it's only a matter of settings then.