I was creating a website and my client wanted the navigation to be by touch on the desktop, I looked and didn't find anything that helped me so I'm posting it here in case anyone needs it.
const mouse = {
x: 0,
y: 0,
mouseMove: false,
screenPosition:{
x: 0,
y: 0
}
};
window.addEventListener('mousedown', (e) => {
//to take the mouse position and screen;
mouse.screenPosition.x = window.scrollX;
mouse.screenPosition.y = window.scrollY;
mouse.x = e.clientX;
mouse.y = e.clientY;
mouse.mouseMove = true;
})
window.addEventListener('mouseup', () => {
mouse.mouseMove = false;
})
window.addEventListener('mousemove', (e) => {
//to take the mouse position
//prevent mouse comportament
e.preventDefault();
if(mouse.mouseMove){
const x = e.clientX - mouse.x;
const y = e.clientY - mouse.y;
window.scrollTo(
mouse.screenPosition.x - x,
mouse.screenPosition.y - y,
);
}
})
I created a website that on desktop you use touch navigation!