How to get touch coordinates in Javascript/jQuery?

Question

Here is the code I'm using

$(document).on("mousemove touchmove",function(e){
    var currentY = e.originalEvent.touches ?  e.originalEvent.touches[0].clientY : e.clientY;
    var currentX = e.originalEvent.touches ?  e.originalEvent.touches[0].clientX : e.clientX;
    //do stuff with the coordinates
});

It works perfectly fine, however there is some lag on mobile devices (tested on Android).

The cause of the lag is the navigation bar, at the top of mobile browsers (e.g. Chrome on Android).

If the user scrolls down, the navigation bar goes out of view and the touch events work perfectly.

The code below disables the page from scrolling, and the touch event works perfectly. However, I do not want to prevent the user from scrolling (as it is required)

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
}, { passive: false }); 

How can I prevent the lag when the navigation bar is present?

Answer 1

It sounds like the touch events are getting caught by the action of the address bar hiding, and I don't think there's a way of preventing that, except to force the navigation bar to always stay visible. You can accomplish that with the css in this answer by Submachine23, which I'll copy here for posterity.

html {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  /* prevent overscroll bounce*/
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* iOS velocity scrolling */
  width: 50%;
  margin-left: 25%;
}