JSFiddle - React, Tailwind, and code Playground

by AsciiSmoke

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

div {
			height: 100px;
			border-bottom: 1px solid #ddd;
		}

		div:nth-child(even) {
			background: #CCC
		}

		div:nth-child(odd) {
			background: #FFF
		}

JavaScript

console.log("Doc Height = " + document.body.offsetHeight);
console.log("win Height = " + document.documentElement.clientHeight);
window.onscroll = function (ev) {
	var docHeight = document.body.offsetHeight;
	docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;

	var winheight = window.innerHeight;
	winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;

	var scrollpoint = window.scrollY;
	scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;

	if ((scrollpoint + winheight) >= docHeight) {
		alert("you're at the bottom");
	}
};