Question

我有这个组件，它具有一个按钮，可水平滚动目标div。按钮的HTML如下所示：

<div class="col">
  <h1 class="float-left">How they compare</h1>
  <div class="btn-group" role="group" aria-label="Basic example">
    <button class="btn btn-link btn-lg" (mousedown)="scrollLeft()" (mouseup)="mouseup()" (mouseleave)="mouseup()">
      <fa-icon [icon]="['far', 'caret-square-left']"></fa-icon>
    </button>
    <button class="btn btn-link btn-lg" (mousedown)="scrollRight()" (mouseup)="mouseup()" (mouseleave)="mouseup()">
      <fa-icon [icon]=" ['far', 'caret-square-right' ]"></fa-icon>
    </button>
  </div>
</div>

如您所见，我正在使用 mousedown ， mouseup 和 mouseleave 来控制我的“动画”，其背后的方法看起来像这个：

@ViewChild('container') productTableContainerElement: ElementRef;

scrollTimeoutHandler: any

scrollLeft(): void {
  if (!this.productTableContainerElement.nativeElement) return;
  this.scrollTimeoutHandler = setInterval(() => {
    this.productTableContainerElement.nativeElement.scrollLeft -= 100;
  }, 100);
}

scrollRight(): void {
  if (!this.productTableContainerElement.nativeElement) return;
  this.scrollTimeoutHandler = setInterval(() => {
    this.productTableContainerElement.nativeElement.scrollLeft += 100;
  }, 100);
}

mouseup(): void {
  if (this.scrollTimeoutHandler) {
    clearInterval(this.scrollTimeoutHandler);
    this.scrollTimeoutHandler = null;
  }
}

这会产生一个非常生涩的滚动，并没有真正做到我想要的。确实，我希望它在按下鼠标时滚动，而在我释放或离开按钮时停止滚动。

有人可以给我一些说明我该怎么做吗？

角度7平滑滚动按钮单击

0 个答案: