JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="block block-small"></div>
<div class="block block-large"></div>
<div class="block block-small"></div>
<div class="block block-medium"></div>
<div class="block block-large"></div>
<div class="block block-small"></div>
<div class="block block-medium"></div>
<div class="block block-small"></div>
<div class="block block-large"></div>

CSS

.block {
  margin: 20px;
  background-color: lightblue;
}

.block-small {
  min-height: 200px;
}

.block-medium {
  min-height: 400px;
}

.block-large {
  min-height: 600px;
}

JavaScript

document.scrollingElement.addEventListener("scroll", function() {
	// This code will never fire. 
	console.log("document.scrollingElement scroll event", document.scrollingElement.scrollTop);
});

document.addEventListener("scroll", function(event) {
	// This code will of course fire.
	console.log("document scroll event", document.scrollingElement.scrollTop, window.scrollY);
});