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());

$("#one").fadeIn(500);
setTimeout( function show() {
  $("#two").fadeIn(500);
}, 3000);
setTimeout( function show() {
  $("#three").fadeIn(500);
}, 6000);
setTimeout( function show() {
  $("#four").fadeIn(500);
}, 9000);
setTimeout( function show() {
  $("#five").fadeIn(500);
}, 12000);