Please tell me, if you start touchmove from the middle of the page and move to the right, then console.log() goes right, but if you move to the left and cross the middle of the screen, console.log() will show the opposite direction, although the swipe goes in the same direction. As I understand it, this is due to the fact that touchstart coordinates are fixed from where touchmove started. How to fix this error. (see video).
var initialX = null;
var initialY = null;
$("#content, .menu").on("touchstart", function(e) {
initialX = e.touches[0].clientX;
initialY = e.touches[0].clientY;
});
$("#content, .menu").on("touchmove", function(e) {
var diffX = initialX - e.touches[0].clientX;
var diffY = initialY - e.touches[0].clientY;
if (Math.abs(diffX) > Math.abs(diffY)) {
if (diffX > 0) {
console.log("Right");
} else {
console.log("Left");
}
} else {
return;
}
var width = parseInt($("body").css("width"));
clientX = e.touches[0].clientX;
width = width - clientX;
if (width >= 0 || width <= 375) {
$(".menu").css("left", "-" + width + "px");
} else {}
})body {
margin: 0px;
overflow: hidden;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.menu {
background: blue;
width: 100%;
height: 100%;
z-index: 1;
position: absolute;
left: -100%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
#content {
width: 100%;
height: 100vh;
color: #000;
display: flex;
align-items: center;
justify-content: center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<body>
<div class="menu" style="transition-duration: 0ms;">Menu slide</div>
<div id="content">
Content slide
</div>
</body>