Płyniejszy scroll.

Question

Pytanie, może nie zbyt oczywiste. Ale za chwilę wytłumaczę o co chodzi.

Mam taką oto metodę Run:

run (){
        this.isRun = true;
      if (this.way == 'left'){
        this.id = setInterval(
          this.renderLeft.bind(this),
          10
        );
      }
      else if (this.way == 'right'){
        this.id = setInterval(
          this.renderRight.bind(this),
          10
        );
      }
  }

To chyba, jest oczywiste wywołuje co N czasu metodę renderRight.

renderLeft(){
    if (this.startAPP){
      console.log('method run');
        if (this.isMaxRect() || this.isLifeSpanAPITooLong() ){
          this.stopAPP();
          return;
        }
      this.scrollLeft();
      ++this.lifeSpanAPI;
      return;
    }
    else if (this.isMaxCurrentFrame() || this.isZeroPosX()){
      this.stopAPP();
      return;
    }
    this.scrollLeft();

  }

A to jest kontroler dla scrollLeft. Pierwszy warunek się sprawdza wtedy , gdy inna cześć aplikacji w tym przypadku slidera jest odpalona. A gdy wciskana jest strzałka jak pan Bóg przekazał ta uruchamiany jest warunek drugi. To ta metoda decyduje kiedy zakończy swój żywot API. A co robi scrollLeft to chyba jest oczywiste.

Problem jest taki, że ta animacja zamula. Gdy, się wciśnie strzałki jest OK, ale jak już po obrazkach. Czasami, frame obrzydliwe zwalnia i wygląda to tak jakby nie wiem liczył PI po tysięcznym przecinku. Niestety te metody są potrzebne. Gdyż kontroler musi wiedzieć, czy element osiągnął wskazany punkt , a jak wiadomo do punktu można dojśc z dwóch stron prawo i lewo lub czy API za długo żyje (czasami zdarza się , że API nie wie czy scrollować lewo lub prawo. Ogólnie domyślam się dlaczego tak dzieje, ale zaimplementowanie rozwiązania powodowały mnóstwo zależności. Dla ciekawskich kod obsługujący te warunki.

 

  isMaxRect(){
    let rectNode = this.node.getBoundingClientRect();
      if (this.way =='right'){
        return this.isMaxRectRight(rectNode);
      }
      else if (this.way == 'left'){
        return this.isMaxRectLeft(rectNode);
      }

  }
  isMaxRectRight(rectNode){
    if (rectNode.left <= this.maxRectLeft) return true; else return false;
  }
  isMaxRectLeft(rectNode){
      if (rectNode.left >= this.maxRectLeft) return true; else return false;
  }
  isLifeSpanAPITooLong (){
    if (this.lifeSpanAPI == 20){
      return true;
    }
    return false;
  }

Macie jakieś pomysły?