JSFiddle - React, Tailwind, and code Playground

by malerba89

HTML

<div class="viewport">
  <div class="spacer"></div>
  <div class="spacer"></div>
</div>

<div class="output"></div>

CSS

.viewport {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: auto;
}

.spacer {
  width: 100%;
  height: 99999999999px;
  transform: translateY(99999999999px);
}

JavaScript

const viewport = document.querySelector('.viewport');
const spacer = document.querySelector('.spacer');
const output = document.querySelector('.output');

viewport.scrollTop = 99999999999;

output.innerText = JSON.stringify({
	viewport: {
  	scrollHeight: viewport.scrollHeight,
    scrollTop: viewport.scrollTop
  },
  spacer: {
  	offsetHeight: spacer.offsetHeight,
  },
});