Quiero al tocar la línea rosa, el usuario podría deslizarse hacia arriba y hacia abajo para cambiar su posición, esto funciona perfectamente en un navegador de escritorio, pero tiene problemas cuando se usa un navegador de iPad

Aquí está mi código para deslizar y cambiar la altura:

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

Cuando trato de mover el mouse después de tocar la barra rosa, sube o baja muy rápido

Después de tocarlo y moverlo simplemente desaparece (la altura del div es superior a la altura de la pantalla)

Por favor ayuda