相关疑难解决方法(0)

使用angular2上的按钮进行水平滚动

所以我在angular2中有这个应用程序,我需要水平滚动组件,但左右按钮.所以我需要一个功能,每个按钮滚动到右边或左边的内容.我需要这样的东西: 在此输入图像描述

我尝试过使用document.getElementById('myscrolldiv').animate({ scrollLeft: "-=" + 250 + "px"; }但是Angular无法识别该animate行.

所以我正在寻找一种使用按钮水平滚动但不使用jquery的不同方法.有角度吗?

这是我的HTML

<div class="container">
  <div class="side">
    <mat-icon (click)="scrollLeft()">keyboard_arrow_left</mat-icon>
  </div>
  <div id="widgetsContent" class="middle">
    <div class="scrolls">
      <div class="info-widget">
         WIDGET
      </div>
      <div class="info-widget">
         WIDGET
      </div>
      <div class="info-widget">
         WIDGET
      </div>
      <div class="info-widget">
         WIDGET
      </div>
      <div class="info-widget">
         WIDGET
      </div>
      <div class="info-widget">
         WIDGET
      </div>
    </div>
  </div>
  <div class="side">
    <mat-icon (click)="scrollRight()">keyboard_arrow_right</mat-icon>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

这是我的CSS

.container {
  display: flex;
  height: 22.5vh !important;
}

.side {
  width: 50px;
  height: 22.5vh !important;
}

.middle {
  flex-grow: 1; …
Run Code Online (Sandbox Code Playgroud)

html css typescript angular

10
推荐指数
2
解决办法
7230
查看次数

标签 统计

angular ×1

css ×1

html ×1

typescript ×1