<!DOCTYPE html>
<style>
#box {
  width: 100px;
  height: 100px;
  background-color: #00ff00;
  transform: translate(0, 100px);
  will-change: transform; /* force compositing */
}

#covered {
  width: 100px;
  height: 100px;
  background-color: #ff8080;
}

#scroller {
  overflow: auto;
  height: 100px;
  width: 100px;
  will-change: transform; /* force compositing */
}

#contents {
  height: 1000px;
  width: 100%;
}
</style>

<div id="box"></div>
<div id="covered"></div>
<div id="scroller">
  <div id="contents"></div>
</div>

<script>
window.addEventListener('load', function() {
  // Move the scroller to quarter way.
  const scroller = document.getElementById("scroller");
  const maxScroll = scroller.scrollHeight - scroller.clientHeight;
  scroller.scrollTop = 0.25 * maxScroll;
});
</script>