angular 单击按钮时横向滚动

Question

我有一个 div，里面有一些卡片。有时卡片数量超过 window 可以显示的数量。在那种情况下，我希望有一个左右按钮在单击时滚动一张卡片 left/right。我不想显示水平滚动条。

<div class=lane>
    <span class='arrow-left' (click)="scrollOneCardLeft()">left</span>
    <span class='arrow-right' (click)="scrollOneCardRight()">right</span>
    <div  class=card-cont *ngFor="let card of myCards; let i = index">
       <div class="card"></div>
    </div>  
</div>

.lane {
  background-color: red;
  margin: 0;
  display: flex;
  justify-content: left;
  align-items: center;
  overflow-x: hidden;
  overflow-y: hidden;
}

span.arrow-left,span.arrow-right{
  display: block;
  position: absolute;
  background-color: #555;    
  color:pink;
  z-index: 2;
  cursor: pointer;
  height:200px;
}
span.arrow-left{
  left: 0px;
}
span.arrow-right{
  right: 0px;
}
.card-cont {
  margin: 10px;
}
.card {
  width: 200px;
  height: 100px;
  background-color: red;
}

我应该如何在 Angular 组件上实现 scrollOneCardLeft() 和 scrollOneCardRight() 以便在单击时滚动一个项目？

Answer 1

我遇到了同样的问题，在其他帖子的帮助下，我最终找到了这两种方法。

  scrollLeft(el: Element) {
    const animTimeMs = 400;
    const pixelsToMove = 315;
    const stepArray = [0.001, 0.021, 0.136, 0.341, 0.341, 0.136, 0.021, 0.001];
    interval(animTimeMs / 8)
      .pipe(
        takeWhile(value => value < 8),
        tap(value => el.scrollLeft -= (pixelsToMove * stepArray[value])),
      )
      .subscribe();
  }

  scrollRight(el: Element) {
    const animTimeMs = 400;
    const pixelsToMove = 315;
    const stepArray = [0.001, 0.021, 0.136, 0.341, 0.341, 0.136, 0.021, 0.001];
    interval(animTimeMs / 8)
      .pipe(
        takeWhile(value => value < 8),
        tap(value => el.scrollLeft += (pixelsToMove * stepArray[value])),
      )
      .subscribe();
  }

他们使用反应性操作来逐渐改变滚动条的左侧位置。
也许尝试弄乱数字，这种方法适合我的需要，稍作调整就可以满足你的需要。

您可以通过传递列表的引用（具有水平滚动的容器）在 (click) 事件中调用它们

  <div class="horizontal-scroll" #list>...</div>
  <button (click)="scrollLeft(list)">Left</button>

angular 单击按钮时横向滚动

angular scroll sideways on button click

angular

angular6