JSFiddle - React, Tailwind, and code Playground

by Wray Bowling

HTML

<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">

<div id="main">
  <div id="menu">Menu</div>
  <div id="scrollY">
	  <div id="battle">Battle</div>
  </div>
  
  <div id="readout"></div>
</div>

CSS

body{
    margin:0;
    background-color:teal;
    color:white
}
#menu{background-color:#333}
#scrollY{background-color:orange; position:absolute;}
#battle{
    background-color:#0ad;
    width:500px;
    height:500px;
}

JavaScript

var readout = document.getElementById('readout');
window.addEventListener("touchstart", start);
window.addEventListener("touchmove", move);
window.addEventListener("touchend", end);

var div = document.getElementById('scrollY');

var divX = 0
   ,divY = 0
   ,touchX
   ,touchY
   ,touchdeltaX
   ,touchdeltaY;

function start(e){
    e.preventDefault();
    touchY = e.targetTouches.item(0).pageY;
}

function move(e){
    e.preventDefault();
    console.log(e);
    touchdeltaY = e.targetTouches.item(0).pageY - touchY;
    div.setAttribute('style','top:'+(divY+touchdeltaY)+'px');
}

function end(e){
    divY += touchdeltaY;
}