角度如何在悬停时使X平滑滚动（自动）

Question

我有一个component，其中的画廊带有X axis。

<div class="gallery">
    <div (mouseenter)="scrollTo('left', $event)" (mouseleave)="clearIntervalRepeater()" class="left"></div>
    <div (mouseenter)="scrollTo('right', $event)"  (mouseleave)="clearIntervalRepeater()" class="right"></div>
    <div class="container-fluid">
        <div #sidewayScroller class="sideway">
            <img *ngFor="let item of galleryImages" [src]="item" alt="gallery-image">
        </div>
    </div>
</div>

您可以看到，我在“ left”和“ right”内有两个divs，它们是透明的绝对div，仅用于将鼠标悬停以影响#sidewayScroller。

我正在尝试使鼠标悬停在“左”或“右”侧上来实现平滑滚动。

我的悬停功能：

  scrollTo(position, event: htmlElement){
    if(position == 'left'){
      console.log('left');
      this.repeater = setInterval(() => {
        this.el.nativeElement.scrollTo({
          left: this.el.nativeElement.scrollLeft - 200,
          behavior: 'smooth',
        })
      }, 150);
    } else {
      this.repeater = setInterval(() => {
        console.log('right');
      this.el.nativeElement.scrollTo({
        left: this.el.nativeElement.scrollLeft + 200,
        behavior: 'smooth',
      })
    }, 180);
    }
  }

  clearIntervalRepeater(){
    console.log('clearing');
    clearInterval(this.repeater);
  }

问题，它不平滑，带有毛刺。我希望它会很平滑，但我无法获得该间隔，有人可以帮助我计算该间隔还是尝试其他方法？