TheGP · December 1, 2024 13:23
diff --git a/gistfile1.js b/gistfile1.js
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Scroll Positions and Distances</title>
 <style>
  body {
    height: 3000px; /* Adding white space */
  }

  #scrollPositions {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 200px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-height: 80%;
    overflow-y: auto;
  }

  #totalDistance {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  #scrollDistances {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 200px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-height: 80%;
    overflow-y: auto;
  }

  #resetButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
  }
 </style>
 </head>
 <body>
 <div id="scrollPositions"></div>
 <div id="totalDistance"></div>
 <div id="scrollDistances"></div>
 <button id="resetButton">Reset</button>

 <pre>
  <div id="code"></div>
 </pre>

 <script>
  window.addEventListener('DOMContentLoaded', function() {
    const scrollPositionsDiv = document.getElementById('scrollPositions');
    const totalDistanceDiv = document.getElementById('totalDistance');
    const scrollDistancesDiv = document.getElementById('scrollDistances');
    const resetButton = document.getElementById('resetButton');
    const codeDiv = document.getElementById('code');
    
    let lastScrollPosition = 0;
    let totalDistance = 0;
    let scrollDistances = [];
    let lastRecordedTime = null;

    // Function to update scroll positions and distances
    function updateScrollPositions() {
      const currentScrollPosition = window.scrollY;
      if (0 === currentScrollPosition) return;


      const distanceTraveled = currentScrollPosition - lastScrollPosition;
      const timePassed = (lastRecordedTime) ? Date.now() - lastRecordedTime : 0;
      scrollPositionsDiv.innerHTML += `Position: ${currentScrollPosition}px` + "<br>";
      totalDistance += Math.abs(distanceTraveled);
      scrollDistances.push([distanceTraveled, timePassed]);
      lastScrollPosition = currentScrollPosition;
      renderTotalDistance();
      renderScrollDistances();
      lastRecordedTime = Date.now();
    }

    // Function to render total distance traveled
    function renderTotalDistance() {
      totalDistanceDiv.textContent = `Total Distance Traveled: ${totalDistance}px`;
    }

    // Function to render scroll distances
    function renderScrollDistances() {
      scrollDistancesDiv.textContent = '';
      scrollDistances.forEach(function([distance, time]) {
        scrollDistancesDiv.textContent += (('' === scrollDistancesDiv.textContent) ? `[` : `,`) + ` [${distance}, ${time}]`;
      });
      scrollDistancesDiv.textContent += `], // ${totalDistance}`;
    }

    // Function to reset scroll positions, distances, and total distance
    function resetScrollPositions() {
      codeDiv.textContent += `${scrollDistancesDiv.textContent}\n`;
      scrollPositionsDiv.textContent = '';
      totalDistanceDiv.textContent = '';
      scrollDistancesDiv.textContent = '';
      lastScrollPosition = 0;
      totalDistance = 0;
      scrollDistances = [];
      window.scrollTo(0, 0); // Scroll to the top
    }

    // Update scroll positions and distances on scroll
    window.addEventListener('scroll', updateScrollPositions);

    // Reset scroll positions, distances, and total distance on button click
    resetButton.addEventListener('click', resetScrollPositions);

    setInterval(() => {

      if ((Date.now() - 1000) >= lastRecordedTime && null !== lastRecordedTime) {
        resetScrollPositions();
        lastRecordedTime = null;
      }
    }, 100);
  });  
 </script>
 </body> 
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Scroll Positions and Distances</title>
	<style>
	body {
	height: 3000px; /* Adding white space */
	}

	#scrollPositions {
	position: fixed;
	top: 10px;
	left: 10px;
	width: 200px;
	background-color: rgba(255, 255, 255, 0.9);
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	max-height: 80%;
	overflow-y: auto;
	}

	#totalDistance {
	position: fixed;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(255, 255, 255, 0.9);
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	}

	#scrollDistances {
	position: fixed;
	top: 10px;
	right: 10px;
	width: 200px;
	background-color: rgba(255, 255, 255, 0.9);
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	max-height: 80%;
	overflow-y: auto;
	}

	#resetButton {
	position: fixed;
	bottom: 20px;
	right: 20px;
	}
	</style>
	</head>
	<body>
	<div id="scrollPositions"></div>
	<div id="totalDistance"></div>
	<div id="scrollDistances"></div>
	<button id="resetButton">Reset</button>

	<pre>
	<div id="code"></div>
	</pre>

	<script>
	window.addEventListener('DOMContentLoaded', function() {
	const scrollPositionsDiv = document.getElementById('scrollPositions');
	const totalDistanceDiv = document.getElementById('totalDistance');
	const scrollDistancesDiv = document.getElementById('scrollDistances');
	const resetButton = document.getElementById('resetButton');
	const codeDiv = document.getElementById('code');

	let lastScrollPosition = 0;
	let totalDistance = 0;
	let scrollDistances = [];
	let lastRecordedTime = null;

	// Function to update scroll positions and distances
	function updateScrollPositions() {
	const currentScrollPosition = window.scrollY;
	if (0 === currentScrollPosition) return;


	const distanceTraveled = currentScrollPosition - lastScrollPosition;
	const timePassed = (lastRecordedTime) ? Date.now() - lastRecordedTime : 0;
	scrollPositionsDiv.innerHTML += `Position: ${currentScrollPosition}px` + "<br>";
	totalDistance += Math.abs(distanceTraveled);
	scrollDistances.push([distanceTraveled, timePassed]);
	lastScrollPosition = currentScrollPosition;
	renderTotalDistance();
	renderScrollDistances();
	lastRecordedTime = Date.now();
	}

	// Function to render total distance traveled
	function renderTotalDistance() {
	totalDistanceDiv.textContent = `Total Distance Traveled: ${totalDistance}px`;
	}

	// Function to render scroll distances
	function renderScrollDistances() {
	scrollDistancesDiv.textContent = '';
	scrollDistances.forEach(function([distance, time]) {
	scrollDistancesDiv.textContent += (('' === scrollDistancesDiv.textContent) ? `[` : `,`) + ` [${distance}, ${time}]`;
	});
	scrollDistancesDiv.textContent += `], // ${totalDistance}`;
	}

	// Function to reset scroll positions, distances, and total distance
	function resetScrollPositions() {
	codeDiv.textContent += `${scrollDistancesDiv.textContent}\n`;
	scrollPositionsDiv.textContent = '';
	totalDistanceDiv.textContent = '';
	scrollDistancesDiv.textContent = '';
	lastScrollPosition = 0;
	totalDistance = 0;
	scrollDistances = [];
	window.scrollTo(0, 0); // Scroll to the top
	}

	// Update scroll positions and distances on scroll
	window.addEventListener('scroll', updateScrollPositions);

	// Reset scroll positions, distances, and total distance on button click
	resetButton.addEventListener('click', resetScrollPositions);

	setInterval(() => {

	if ((Date.now() - 1000) >= lastRecordedTime && null !== lastRecordedTime) {
	resetScrollPositions();
	lastRecordedTime = null;
	}
	}, 100);
	});
	</script>
	</body>
	</html>