CODEWITHSUNDEEP
javascriptangulartypescriptangular-material
Moshe
Moshe

Reputation: 2674

Horizontally scroll div with Angular4

I have the following HTML code:

<div class="card-deck" fxLayout.xs="row" style="overflow: scroll; height:100%">
    <md-card style="width:10rem" *ngFor="let make of filteredMakes" (click)="goToModels(make.niceName)"
             class="page-card mat-card">
      <img md-card-image=""  src="assets/img/gallery/brands/256/{{make.name}}.png" class="mat-card-image" />
      <md-card-subtitle  class="mat-card-title text-center">{{ make.name }}</md-card-subtitle>
    </md-card>
</div>

This is how it looks like on mobile:

Mobile First

I would like to create an animation that scrolls horizontally automatically to the last manufacturer, but stops when a user interacts with it.

In other words:

  1. User opens page, sees automatic scroll
  2. User understands that this is a scrolling div, begins to scroll with his finger.
  3. Auto-Scrolling is now disabled on the page (until the user resets the state of the page)

Where I am having trouble:

  1. How do I automatically scroll with javascript? (ideally I would like to control how much pixels to scroll in a time frame, 50px/sec for example)
  2. How do I detect when a user interacts with "card-deck" div (like gestures: touch, slide, etc.)

Upvotes: 0

Views: 1604

Answers (1)

Maxime Leprince
Maxime Leprince

Reputation: 156

1) Auto-scroll : you can use JS function setInterval to change every x mS the position of your div.

2) you can use the @HostListener annotation (See Angular doc) to watch user interaction and cancel the setInterval with the JS function clearInterval when a click event is triggered

Upvotes: 1

Related Questions