<!DOCTYPE html>
<style>
  #container {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    overflow: scroll;
  }

  #overlapper {
    position: fixed;
    background-color: red;
    width: 50px;
    height: 200px;
    left: 20px;
    top: 20px;
    transform: translateZ(0);
  }

  #subcontainer {
    height: 500px
  }

  .child {
    position: relative;
    top: 5px;
    left: 5px;
    background-color: green;
    height: 35px;
    width: 35px;
    margin: 50px;
  }

  .grandchild {
    position: relative;
    top: 5px;
    left: 5px;
    background-color: blue;
    height: 10px;
    width: 10px;
  }
</style>

<div id="overlapper"></div>
<div id="container">
  <div id="subcontainer">
    <div class="child">
      <div class="grandchild"></div>
    </div>
    <div class="child">
      <div class="grandchild"></div>
    </div>
  </div>
</div>
<script>
// Scroll so that one of the grandchildren boxes is half clipped by the overflow:scroll div.
var container = document.getElementById("container");
container.scrollTop = 65;
</script>