The coordinates seem to read fine on a desktop/laptop browser. However on mobile, I'm getting a delay while scrolling/swiping down and up. The coordinates seem to be jumpy and not updating immediately.
If you try on desktop and mobile you'll see difference. I wonder if this is a bug, or there is some way to make it follow the touch better. Can anyone help?
<!DOCTYPE html>
<html>
<head>
<title>mobile XY</title>
<style>
html, body {
overscroll-behavior: none;
}
.xy {
position:fixed;
touch-action: none;
pointer-events: none;
transform: translate(-50%, -100%);
z-index: 10001;
}
.spacer {
height: 700px;
}
</style>
</head>
<body>
<div class="xy"></div>
<div class="spacer">spacer 1</div><div class="spacer">spacer 2</div><div class="spacer">spacer 3</div><div class="spacer">spacer 4</div><div class="spacer">spacer 5</div>
<script>
function showCoordinates(event){
var x, y;
if (event.type === 'touchmove' || event.type === 'touchstart' || event.type === 'touchend') {
var touch = event.touches[0];
x = touch.clientX;
y = touch.clientY;
} else {
x = event.clientX;
y = event.clientY;
}
document.querySelector('.xy').textContent = 'X: ' + x + ', Y: ' + y;
document.querySelector('.xy').style.left = x + "px";
document.querySelector('.xy').style.top = y + "px";
}
['mousemove', 'touchmove', 'touchstart', 'touchend'].forEach(eventType => document.addEventListener(eventType, showCoordinates));
</script>
</body>
</html>
