JSFiddle - React, Tailwind, and code Playground

Testing Scroll Events

by MegaScience

HTML

<div id="currentData">Current Data: <span>N/A</span></div>

CSS

body {
  min-height: 150vh;
}

#currentData {
  position: fixed;
  top: 0;
  left: 0;
}

JavaScript

'use strict'
const currentData = document.querySelector('div#currentData span')
// https://stackoverflow.com/a/5612876/5857393
const objectToString = obj => {
	let str = []
	for(const property in obj) {
  	if(obj.hasOwnProperty(property)) {
    	str.push(`\t"${property}": ${obj[property]}`)
    }
  	else {
    	str.push(`\t'${property}': ${obj[property]}`)
    }
  }
	return `\{
${str.join(',\n')}
\}`
}

//document.addEventListener('scroll', console.log)
//document.addEventListener('scroll', attrs => currentData.innerText = JSON.stringify(attrs, null, 2))
document.addEventListener('scroll', attrs => currentData.innerText = objectToString(attrs))