JSFiddle - React, Tailwind, and code Playground

HTML

<!--
Scroll down past 50px in Chrome. You'll see that the scrollbar
suddenly changes size (scrollTop has changed) when content
is added before visible content, in order to keep the visible
content in the viewport.
-->
<div style="overflow: auto; height: 100px;">
  <div style="background: darksalmon; height: 100px;"></div>
  <div style="background: palevioletred; height: 100px;"></div>
</div>

JavaScript

let appended = false;

document.querySelector("div").addEventListener("scroll", e => {
	if (!appended && e.target.scrollTop > 50) {
  	const div = document.createElement("div");
    div.style.height = "100px";
  	e.target.prepend(div);
    appended = true;
  }
});