End of the mouse wheel event

by Kearnan Kelly

HTML

<div class="intro">
	<h2>End of the mouse wheel event</h2>
	<p>Scroll whis window with the mouse wheel. To see the effect of inertial scrolling, try do it on the Macbook trackpad or on the Apple Magic Mouse.</p>
</div>
<div id="info"></div>

CSS

.intro,
#info{
  margin:10vw;
  font:1em sans-serif;
}

JavaScript

let elem = document,
  info = document.getElementById('info'),
  marker = true,
  delta,
  direction,
  interval = 50,
  counter1 = 0,
  counter2,
  counter3,
  counter4;

elem.addEventListener('wheel', wheel);

function wheel(e) {
  counter1 += 1;
  delta = e.deltaY;
  if (delta > 0) {
    direction = 'up'
  } else {
    direction = 'down'
  }
  if (marker) {
    wheelStart()
  }
  return false;
}

function wheelStart() {
  marker = false;
  wheelAct();
  counter3 = new Date();
  info.innerHTML = 'Start event. Direction: ' + direction;
}

function wheelAct() {
  counter2 = counter1;
  setTimeout(function() {
    if (counter2 == counter1) {
      wheelEnd();
    } else {
      info.innerHTML = info.innerHTML + '<br>...';
      wheelAct();
    }
  }, interval);
}

function wheelEnd() {
  counter4 = new Date();
  info.innerHTML = info.innerHTML + '<br>End event. Duration: ' + (counter4 - counter3) + ' ms';
  marker = true;
  counter1 = 0;
  counter2 = false;
  counter3 = false;
  counter4 = false;
}