Determine touch position with JavaScript

Question

For this page, I managed to get the position of my mouse to modify the dimensions of my divs and create this effect.

I get the position of my mouse with this code

let root = document.documentElement;
root.addEventListener("mousemove", e => {
  root.style.setProperty('--mouse-x', e.clientX + "px");
  root.style.setProperty('--mouse-y', e.clientY + "1px");
});

and I link the position to my css to modify the dimensions

.square-top-1 {
  width: 100%;
  height: var(--mouse-y);
  background-color: black;
  min-height: 5%;
}

I'm now trying to do the same thing for mobile or tablet when dragging his finger on the screen.

I found some answers here and here

But I can't get it to work. Either it does nothing or it completely cancels the effect on desktop computer

I have very limited knowledge in JS, could someone help me?

Thank you very much, Have a nice day

T.