水平滚动的div与Angular4

我有以下的HTML代码：水平滚动的div与Angular4

<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>

这是怎么看起来像手机：

我想创建水平滚动动画自动到最后一个制造商，但在用户与其交互时停止。

换句话说：

用户打开网页，看到自动滚动
用户理解，这是一个滚动的div，开始用手指来滚动。
自动滚动，现在是在页面上禁用（直到用户重新设置页面的状态）

如果我有麻烦：

如何自动使用JavaScript滚动？（理想情况下，我想控制在一个时间范围内滚动多少像素，例如50px /秒）
如何检测用户何时与“card-deck”div交互（如手势：触摸，幻灯片等）

来源

2017-04-25 Moshe

1）自动滚动：你可以使用JS函数setInterval来改变每个x mS div的位置。

2）你可以使用@HostListener注释（See Angular doc）观看的用户互动，并与当点击事件被触发

来源

2017-04-25 21:40:32

你能告诉我如何做到这一点的jQuery功能角的JS功能clearInterval取消setInterval办法？（{scrollLeft：'+ = 750'}，1000）.animate（{scrollLeft：'0'}，500）;' – Moshe

水平滚动的div与Angular4

回答

相关问题