JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<div id="cont">
</div>
<script>
  var oldVal = -1;
  var currentVal = 0;
  var valArr = [];

  window.onload = function() {
    var HTML = '';
    for (var i = 0; i < 500; i++) {
      HTML += '<div>' + i + '</div>';
    }
    document.getElementById("cont").innerHTML = HTML;
    if (window.DeviceOrientationEvent) {
      window.addEventListener('deviceorientation', handleBeta, false);
      window.timer = setInterval(function() {
        // if((oldVal > 0 && currentVal < 0) || (oldVal < 0 && currentVal > 0)){
        // 	currentVal = 0;
        // }
        // oldVal = currentVal;
        var newY = scrollY + currentVal;
        window.scrollTo(scrollX, newY);
        if (document.getElementById("debug_div")) {
          document.getElementById("debug_div").textContent = newY;
        }
      }, 16);

      var div = document.createElement('div');
      div.style.cssText = 'position:fixed;top:60px;left:calc(50% - 25px);width:50px;height:30px;line-height:30px;background:white;border:1px solid black;color:black;text-align:center;';
      div.id = "debug_div";
      document.body.appendChild(div);
    }

  }

  function handleBeta(eventData) {
    if (eventData && eventData.beta) {
      // currentVal = parseInt((eventData.rotationRate.alpha/3)%3);
      var newVal = Math.round(eventData.beta);
      if (newVal < -3 || newVal > 3) {
        valArr.push(newVal);
      } else {
        currentVal = Math.max.apply([], valArr);
        if (currentVal < 0) {
          currentVal = Math.min.apply([], valArr);
        }
        valArr = [];
      }
    }
  }

</script>

CSS

#cont div {
  width: 100%;
  padding: 10px;
  background: #fff;
  margin: 1px;
  box-shadow: 0px 0px 1px;
  text-align: center;
}