JSFiddle - React, Tailwind, and code Playground

by Thomas Gladdines

HTML

<h1>HTML Ipsum Presents</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	       
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas....

JavaScript

(function iDirectionSpeedVelocity() {
	var distance = 100; //pixels to scroll to determine speed
	var preventLoop = true;
	var currentScroll = [];
	var currentDate = [];
	function scroll() {
		if(preventLoop) {
			//Set date on scroll
			currentDate.push(new Date());
			
			//Set scrollTop on scroll
			currentScroll.push(scrollTop());
			
			var lastDate = currentDate[currentDate.length - 1];
			var lastScroll = currentScroll[currentScroll.length - 1];
			
			//User scrolled `distance` px or scrolled to the top/bottom
			if(Math.abs(currentScroll[0] - lastScroll) >= distance || !lastScroll || lastScroll == scrollHeight()) {
				//Stop scrolling
				preventLoop = false;
				freeze(currentScroll[currentScroll.length - 1]);
				
				//Total time
				console.log("Time: "+(lastDate.getTime() - currentDate[0].getTime())+"ms");
				
				//Total distance
				console.log("Distance: "+Math.abs(lastScroll - currentScroll[0])+"px");
				
				/*
				Calculate speeds between every registered scroll
				(speed is described in milliseconds per pixel)
				*/
				var speeds = [];
				for(var x = 0; x < currentScroll.length - 1; x++) {
					var time = currentDate[x + 1].getTime() - currentDate[x].getTime();
					var offset = Math.abs(currentScroll[x - 1] - currentScroll[x]);
					if(offset) {
						var speed = time / offset;
						speeds.push(speed);
					}
				}
				
				//Output array of registered speeds (milliseconds per pixel)
				console.log("speeds (milliseconds per pixel):");
				console.log(speeds);
				
				/*
				We can use the array of speeds to check if the speed is increasing
				or decreasing between the first and last half as example
				*/ 
				var half = Math.round(speeds.length / 2);
				var equal = half == speeds.length ? 0 : 1;
				var firstHalfSpeed = 0;
				for(var x = 0; x < half; x++ ) {
					firstHalfSpeed += speeds[x];
				}
				firstHalfSpeed /= half;
				var secondHalfSpeed = 0;
				for(var x = half - equal; x < speeds.length; x++ )...