I want to when touching the pink line, the user could slide up and down to change its position, this works perfectly on a desktop browser, but struggle when using an Ipad browser

hier is my code for sliding and changing height :

const handler = document.querySelector('.handler');

handler.addEventListener('touchstart', (e) =>  {
  // If mousedown event is fired from .handler, toggle flag to true

  this.isHandlerDragging = true;
  // @ts-ignore

  this.y = e.view.innerHeight;
  // @ts-ignore
  console.log(e.touches[0].clientY);
});
document.addEventListener('touchmove', (ev) =>  {
 // console.log(ev);
  // If mousedown event is fired from .handler, toggle flag to true
  if (this.isHandlerDragging){

    console.log('ev.touches[0].clientY = ' + ev.touches[0].clientY)
    console.log('this.y = ' + this.y)
    console.log('this.dy = ' + this.dy)


    // @ts-ignore
    this.dy = ev.touches[0].clientY - this.y;
    // @ts-ignore
    this.y = ev.touches[0].clientY;
    this.scrollSCNoStaff -= this.dy;

    this.heigthScrollNS += (this.dy);
    this.scrollHeigth += (this.dy / 2);

  }
});

document.addEventListener('touchend', (e) => {
  // Turn off dragging flag when user mouse is up
  this.isHandlerDragging = false;
});

When I just try to move the mouse after touching the pink bar it goes up or down very quick

After touching and moving it just disappear (the div height is superior to the screen height)

Please help