JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus sapiente eaque alias eum mollitia cum facere, facilis, molestias at quidem deleniti qui, adipisci ab ut. Accusantium et officia sed voluptatum.</div>
<div>Iure a, sunt sit nulla commodi minima asperiores. Reiciendis illum voluptatum iure similique, magni explicabo est odit voluptatibus suscipit voluptatem saepe vero esse soluta debitis incidunt vitae ab sapiente mollitia!</div>
<div>At deserunt adipisci vel, atque voluptate sunt fugiat voluptatem nulla animi minus quos quisquam, culpa nesciunt tempore architecto. Dignissimos, maiores! Ducimus sit nostrum recusandae eaque, libero eius blanditiis debitis soluta.</div>
<div>Veniam provident unde quasi magni rerum! Recusandae pariatur cupiditate odit perferendis molestiae corporis obcaecati, architecto, quae porro dolor incidunt explicabo totam aliquam omnis est iure nemo assumenda esse quos officia.</div>
<div>Provident perspiciatis laboriosam illo voluptas ut maxime culpa perferendis, distinctio quibusdam nihil nesciunt quasi modi, qui est autem quod odit, repellendus eos nisi voluptatibus in. Sunt possimus eligendi, ut ullam.</div>
<div>Impedit aliquam praesentium quam. Nisi esse illum expedita. Libero quo, repellat eius doloremque maiores doloribus necessitatibus impedit suscipit, voluptates itaque aut, autem harum! Nobis aspernatur laboriosam autem. Cupiditate, culpa, omnis.</div>
<div>Sequi exercitationem recusandae est sit obcaecati reiciendis quas veritatis voluptatum iusto dolorem ducimus vero necessitatibus cum aspernatur natus earum fugiat quo unde numquam similique quasi, provident iure dolorum ex? Adipisci.</div>
<div>Exercitationem voluptatem illo illum voluptatum esse omnis, odit deleniti facere minima nulla repellat. Eligendi quasi velit voluptate sint veniam cum a, odio, laudantium dignissimos saepe, quo rem vel ad dolorem.</div>
<div>Libero blanditiis dolor aliquid, reiciendis doloribus ea natus modi dignissimos esse minus...

CSS

html, body {
  margin: 0;
}

#bot {
  position: fixed;
  top: 0;
  right: 0;
  background: white;
}

JavaScript

window.addEventListener('scroll', () => {
	bot.textContent = document.documentElement.offsetHeight -	(Math.ceil(window.scrollY) + window.innerHeight);
})