// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/ let lastKnownScrollPosition = 0; let ticking = false; function doSomething(scrollPos) { // Do something with the scroll position } document.addEventListener('scroll', function(e) { lastKnownScrollPosition = window.scrollY; if (!ticking) { window.requestAnimationFrame(function() { doSomething(lastKnownScrollPosition); ticking = false; }); ticking = true; } });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter