Angular как сделать плавную прокрутку 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>

Как видите, у меня есть два divs внутри "left" и "right", это прозрачные абсолютные 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);
  }

Задача , она не плавная, идет с глюками. Я хочу, чтобы это было гладко, но я не могу получить этот интервал, может кто-нибудь помочь мне рассчитать его или попробовать другой метод?

Answer 1

Попробуйте без использования прокрутки. Режим прокрутки плавно прокручивается до заданной позиции, но затем останавливается и должен начинаться снова. Установка положения прокрутки вручную и уменьшение интервала и шагов для улучшения частоты кадров должны решить вашу проблему:

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

Теперь скорость движений постоянна и выглядит плавно.