msimpson · November 17, 2020 10:09
diff --git a/scroll-test.html b/scroll-test.html
 <!doctype html>
 <html>
  <head>
    <title>Scroll Test</title>
    <style>

      html, body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

    </style>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>

      $(function() {
        var canvas     = $('canvas'),
            ctx        = canvas[0].getContext("2d"),
            deltas     = [null, null, null, null, null, null, null, null, null],
            lastPeak   = 0,
            center     = null,
            x          = 0;

        function resize() {
          ctx.canvas.width  = $(window).innerWidth();
          ctx.canvas.height = $(window).innerHeight();
          center = Math.floor(ctx.canvas.height / 2);
          clear();
          guides();
        }

        function clear() {
          x = 0;
          ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        }

        function guides() {
          ctx.fillStyle = '#000';
          ctx.fillRect(0, center, ctx.canvas.width, 1);
          ctx.fillStyle = '#0f0';
          ctx.fillRect(0, center - 60, ctx.canvas.width, 1);
          ctx.fillRect(0, center + 60, ctx.canvas.width, 1);
        }

        function hash() {
          ctx.fillStyle = '#00f';
          ctx.fillRect(x, center + 10, 1, -20);
        }

        function hasPeak() {
          if (deltas[0] == null) return false;

          var flat = [];
          for (var i in deltas) {
            flat.push(Math.abs(deltas[i]));
          }

          if (
            Math.abs(x - lastPeak) > 10 &&
            flat[0] <  flat[4] &&
            flat[1] <= flat[4] &&
            flat[2] <= flat[4] &&
            flat[3] <= flat[4] &&
            flat[5] <= flat[4] &&
            flat[6] <= flat[4] &&
            flat[7] <= flat[4] &&
            flat[8] <  flat[4]
          ) {
            lastPeak = x;
            return true;
          }
          return false;
        }

        resize();
        guides();

        $(window)
          .on('resize', resize)
          .on('mousewheel DOMMouseScroll', function(e) {
            var delta  = e.type == 'mousewheel' ? e.originalEvent.wheelDelta * -1 : 40 * e.originalEvent.detail;

            if (hasPeak()) hash();
            else if ((deltas[8] == null || Math.abs(deltas[8]) == 120) && Math.abs(delta) == 120) hash();
            
            ctx.fillStyle = '#f00';
            ctx.fillRect(x, center, 1, delta * -1);

            guides();

            deltas.shift();
            deltas.push(delta);
            x++
            if (x > ctx.canvas.width) clear();
          });
      });

    </script>
  </head>
  <body>
    <canvas></canvas>
  </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Scroll Test</title>
	<style>

	html, body {
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}

	</style>
	<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script>

	$(function() {
	var canvas = $('canvas'),
	ctx = canvas[0].getContext("2d"),
	deltas = [null, null, null, null, null, null, null, null, null],
	lastPeak = 0,
	center = null,
	x = 0;

	function resize() {
	ctx.canvas.width = $(window).innerWidth();
	ctx.canvas.height = $(window).innerHeight();
	center = Math.floor(ctx.canvas.height / 2);
	clear();
	guides();
	}

	function clear() {
	x = 0;
	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
	}

	function guides() {
	ctx.fillStyle = '#000';
	ctx.fillRect(0, center, ctx.canvas.width, 1);
	ctx.fillStyle = '#0f0';
	ctx.fillRect(0, center - 60, ctx.canvas.width, 1);
	ctx.fillRect(0, center + 60, ctx.canvas.width, 1);
	}

	function hash() {
	ctx.fillStyle = '#00f';
	ctx.fillRect(x, center + 10, 1, -20);
	}

	function hasPeak() {
	if (deltas[0] == null) return false;

	var flat = [];
	for (var i in deltas) {
	flat.push(Math.abs(deltas[i]));
	}

	if (
	Math.abs(x - lastPeak) > 10 &&
	flat[0] < flat[4] &&
	flat[1] <= flat[4] &&
	flat[2] <= flat[4] &&
	flat[3] <= flat[4] &&
	flat[5] <= flat[4] &&
	flat[6] <= flat[4] &&
	flat[7] <= flat[4] &&
	flat[8] < flat[4]
	) {
	lastPeak = x;
	return true;
	}
	return false;
	}

	resize();
	guides();

	$(window)
	.on('resize', resize)
	.on('mousewheel DOMMouseScroll', function(e) {
	var delta = e.type == 'mousewheel' ? e.originalEvent.wheelDelta * -1 : 40 * e.originalEvent.detail;

	if (hasPeak()) hash();
	else if ((deltas[8] == null \|\| Math.abs(deltas[8]) == 120) && Math.abs(delta) == 120) hash();

	ctx.fillStyle = '#f00';
	ctx.fillRect(x, center, 1, delta * -1);

	guides();

	deltas.shift();
	deltas.push(delta);
	x++
	if (x > ctx.canvas.width) clear();
	});
	});

	</script>
	</head>
	<body>
	<canvas></canvas>
	</body>
	</html>