Why doesn't Angular JS track controller variables when scrolling on mobile?

Question

JavaScript

Sample code from the service

onScroll(){
    this.scrollAfterTouchListener('scroll');
  }

  onTouchStart(){
    this.scrollAfterTouchListener('touch');
  }

  srollAfterTouch(type){
    if (type === 'touch') this.touched = true;
    if (type === 'scroll' && this.touched){
      if ((window.scrollY - this.prevScrollValue) < -50 ){
        if (!this.direction || this.direction === "up") this.emit("touchscroll",'down');
        this.direction = 'down';
        this.prevScrollValue = window.scrollY
      }
      if ((window.scrollY - this.prevScrollValue) >50 ){
        if (!this.direction || this.direction === "down") this.emit("touchscroll",'up');
        this.direction = 'up';
        this.prevScrollValue = window.scrollY
      }
    }
  }

Code example in controller

listenChangeVisiblity() {

    services.get(this).scope.$watch(() => this.isVisible, (direction) => {
      console.log({"visiblity1":direction});
    });

    services.get(this).header.on('touchscroll', this.setVisiblityHandler);
  }

  setVisiblity(direction){
    this.isVisible = direction;
    console.log({"visiblity2":direction});
  }

The bottom line is that in the console, the visiblity2 event passes immediately after the start of the scroll, and visiblity1 when I stop scrolling.
How to deal with this, assign classes with native methods of the browser?