Mouse Wheel Scroll Tester

by skibulk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="output"></div>
<div id="scroll"></div>

CSS

#output {
  position: fixed;
  bottom: 0;
  font-family: sans-serif;
  size: 24px;
}

#scroll {
  height: 100000px;
  background: #eee url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".1" >\
    <rect x="200" width="200" height="200" />\
    <rect y="200" width="200" height="200" />\
    </svg>');
}

JavaScript

console.clear();

$output = $("#output");
var lastPosition = 0;

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

$(window).scroll(debounce(function(){
	$output.append("<p>Scrolled: " + Math.abs(window.scrollY - lastPosition) + " px</p>");
  lastPosition = window.scrollY;
}, 100));