JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
  <p>
  Scroll the page down until the top of the box is slightly out of the viewport
  </p>
  <div id="overflowwrap">
    <div id="five" style="display: none;">a lot of content</div>
    <div id="four" style="display: none;">a lot of content</div>
    <div id="three" style="display: none;">a lot of content</div>
    <div id="two" style="display: none;">a lot of content</div>
    <div id="one" style="display: none;">a lot of content</div>
  </div> 
</div>

CSS

#outer {
  padding: 10em 1em;
  background: violet;
}
#overflowwrap {
  overflow: hidden !important;
}

#one {
  height: 800px;
  background-color: red;
}
#two {
  height: 800px;
  background-color: orange;
}
#three {
  height: 800px;
  background-color: yellow;
}
#four {
  height: 800px;
  background-color: green;
}
#five {
  height: 800px;
  background-color: blue;
}

JavaScript

$('#overflowwrap').css('max-height', $(window).height());
fadeIn("#one", 0)
fadeIn("#two", 5000)
fadeIn("#three", 10000)
fadeIn("#four", 15000)
fadeIn("#five", 20000)

function cs() {
  console.log(document.scrollingElement.scrollTop)
}
document.scrollingElement.scrollTop = 16

function fadeIn(el, when) {
  setTimeout(function show() {
    var t=document.scrollingElement.scrollTop
    $(el).fadeIn(500);
    document.scrollingElement.scrollTop = t
  }, when);

}