2

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:

enter image description here

But instead it never scrolls automatically.

Michael
  • 287
  • 1
  • 10
  • 17
  • Can you please clarify- do you mean so that you don't have to click the scrollbar with the mouse, or are you trying to have the code do some auto scrolling? If the mouse is the problem, shift + scroll wheel is horizontal, or most trackpads support the multi touch gesture. –  Jan 22 '19 at 12:15
  • No. What I mean: The component always stays at the same spot, even when I add more cards. What I want: It should always scroll to the right automatically, so that the most recent card gets shown. But of course scrolling with the mouse should be possible too. I hope you know what I mean. – Michael Jan 22 '19 at 12:34
  • I was looking at this stackblitz https://stackblitz.com/edit/angular-scroll-local-variable?file=src%2Fapp%2Fscroll.component.ts from this answer https://stackoverflow.com/questions/43945548/scroll-to-element-on-click-in-angular-4/43945776, can you have a no size element after that you always call scrollIntoView on when you add a card? –  Jan 25 '19 at 13:38

1 Answers1

2

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.

Kapcash
  • 6,377
  • 2
  • 18
  • 40