<html>
<head>
<title>wheeltest4.htm</title>
<script type="text/javascript">

var clicks = 0;
var zoom = 0;
var zoomString = "<br>";
var certainInterval = 0.3;
var deltaNum = 0.0;
var timeStart = 0.0;
var timeStop = 0.0;
var difference = 0.0;

function getTimeNow() {
  if (newDate != null) {
    newDate = null;
  }
  var newDate = new Date();
  return newDate.valueOf();
}

function handle(delta) {

  if (clicks % 2 != 0) {
    timeStart = getTimeNow();
  } else {
    timeStop = getTimeNow();
    difference = timeStop - timeStart; 
  }

  var s = delta + ": ";

  if (delta < 0) {
    zoom--;
    s += "down";
  } else {
    zoom++;
    s += "up";
  }

  // Here, assume we do not want any value to go outside the range -14 to 14.
  if (zoom > 14) {
    zoom = 14;
  }
  if (zoom < -14) {
    zoom = -14;
  }

  // If there were wheel events with at least certain interval (eg, 0.5), then record it in zoomString.
  if (difference/1000 >= certainInterval) {
    zoomString += "<br>" + zoom;
  }

  document.getElementById('delta').innerHTML = s + "<br>current zoom: " + zoom + "<br>" + zoomString + "<br>clicks: " + clicks;
  clicks++;
}

function wheel(event){
  if (!event) { 
    event = window.event; 
  }
  if (event.wheelDelta) {
    deltaNum = event.wheelDelta/120; 
    if (window.opera) { 
      deltaNum = -deltaNum; 
    }
  } else if (event.detail) {
    deltaNum = -event.detail/3;
  }
  if (deltaNum) {
    handle(deltaNum);
  }
}

/* Initialization code. */
if (window.addEventListener) {
  window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;

</script>
</head>
<body>
<div id="delta">Scroll mouse wheel to see delta here.</div>
</body>
</html>