JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<title></title>
<head>
<style type="text/css">
html, body {
  height:100%;
}
body {
  margin:0;
  padding:0;
}
#bar {
  background: #f00;
  height: 200px;
  position: fixed;
  top: 0;
  width: 100%;
}

p {
  margin-top: 250px;
}
li {
  margin:2em 0;
}
#divScroll {
  overflow:auto;
  height:100%;
  width:100%;
}
</style>

<script language="javascript">
function adjustScroll(event) {
  var ds = document.getElementById('divScroll');
  var b = document.getElementById('bar')
  var e = event || window.event;
  var key = e.which || e.keyCode;
  if(key === 33) { // Page up
    var remainingSpace = ds.scrollHeight - ds.scrollTop;
    setTimeout(function() {
      ds.scrollTop = (remainingSpace >= ds.scrollHeight - b.offsetHeight) ? 0 : (ds.scrollTop + b.offsetHeight);
    }, 10);
  }
  if(key === 34) { // Page down
    var remainingSpace = ds.scrollHeight - ds.scrollTop - ds.offsetHeight;
    setTimeout(function() {
      ds.scrollTop = (remainingSpace <= b.offsetHeight) ? ds.scrollHeight : (ds.scrollTop - b.offsetHeight);
    }, 10);
  }
}

document.onkeydown = adjustScroll;
</script>
</head>

<body>

<div id="bar">IMPORTANT STUFF GOES HERE</div>

<div id="divScroll">
  <p>When you press Page Down (and then Page Up the other way), some of the list items are cut off below the red bar.</p>
  <ol>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
  </ol>
</div>

</body>
</html>