JSFiddle - React, Tailwind, and code Playground

HTML

<html><head>

	<style>
		.content { background: #f8f8f8; padding: 20px; height: 1000px; }
		.person { padding: 20px; font-size: 20px; line-height: 20px; }
		.person.mark { background: pink; }
		.person.peter { background: lightblue; }
		.person.albert { background: lightgreen; }
		div + div { margin-top: 20px; }
		div { border: 1px solid black; }
		#console { position: fixed; top: 10px; right: 10px; width: 50%; height: 300px; overflow: auto; border: 3px solid black; background: white; }
	</style>

</head><body>

	<div id="console"></div>
	<div class="content">...some content...</div>
	<div id="mark_div" class="person mark">MARK</div>
	<div class="content">...some content...</div>
	<div id="peter_div" class="person peter">PETER</div>
	<div class="content">...some content...</div>
	<div id="albert_div" class="person albert">ALBERT</div>
	<div class="content">...some content...</div>

	<script>

		function Person( name, div_id )
		{
			// properties
			this.label = name;
			this.div = document.getElementById( div_id );			
			
			// auxiliary function
			this.is_in_viewport = function( el )
			{
				var rect = el.getBoundingClientRect();
				return (
					rect.top+el.offsetHeight >= 0 &&
					rect.left >= 0 &&
					rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
					rect.right <= (window.innerWidth || document.documentElement.clientWidth)
				);
			}
			
			// i_am_watching
			this.i_am_watching = function()
			{
				if( this.is_in_viewport( this.div ) ) document.getElementById('console').innerHTML += "I'm watching <b>"+name+"<br>" ;
			}
			
			// listener
			window.addEventListener( 'scroll', this.i_am_watching, false );
		}
		
		Person( "mark", "mark_div" );
		Person( "peter", "peter_div" );
		Person( "albert", "albert_div" );
		
	</script>

</body></html>