javascript - Angular hur man gör smidig X-rullning vid hover (automatisk)

Jag har en komponent som har ett galleri med X-axel.

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

Som du kan se har jag två divs inuti "left" och "right", de är transparenta absoluta divs, som endast används för hover för att påverka #sidewayScroller.

Jag försöker uppnå mjuk scrollning vid hovring åt sidan "vänster" eller "höger".

Min hovringsfunktion :

  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);
  }

Problem, det är inte jämnt, det går med glitchar. Jag vill att det ska vara jämnt men jag kan inte få det intervallet, kan någon hjälpa mig att räkna ut det eller prova en annan metod?

Svar #1

Prova det utan rullningsbeteende. Rullningsbeteendet kommer att rulla smidigt till den inställda positionen men sedan stannar och måste startas igen. Att ställa in rullningspositionen manuellt och sänka intervallet och stegen för bättre bildfrekvens bör lösa ditt problem:

scrollTo(position, event: MouseEvent){
    if(position == 'left'){
      console.log('left');
      this.repeater = setInterval(() => {
        this.el.nativeElement.scrollLeft -= 5;
      }, 10);
    } else {
      this.repeater = setInterval(() => {
        console.log('right');
        this.el.nativeElement.scrollLeft += 5;
      }, 10);
    }
}

Nu är rörelsens hastighet konstant och det ser smidigt ut.