JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div style="background:red; left:0;">
test 1
</div>
<div style="background:green; left:100%;">
test 2
</div>
<div style="background:orange; left:200%;">
test 3
</div>
<div style="background:blue; left:300%;">
test 4
</div>

CSS

div{
  width:100%;
  height:100%;
  display:inline-block;
  position:absolute;
}
html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

JavaScript

var lastY;
window.addEventListener('touchmove', function (e){
     var currentY = e.originalEvent.touches[0].clientY;
     if(currentY > lastY){
         // moved down
         alert('moved down')
     }else if(currentY < lastY){
         // moved up
         alert('moved up')
     }
     lastY = currentY;
});