<!DOCTYPE html>
<style>
[id^="target"] {
  width: 60px;
  height: 40px;
  margin: 10px;
  background: rgb(160, 0, 0);
}
</style>
<div id="target1"></div>
<div id="target2"></div>
<div style="width: 150px; height: 150px; background: yellow">
  <div id="target3" style="position: relative; top: 70px; left: 30px"></div>
</div>
<div id="scroller" style="will-change: transform; width: 150px; height: 150px; overflow: scroll">
  <div style="width: 4000px; height: 20000px"></div>
  <div id="target4" style="position: relative; top: -10000px; left: 30px"></div>
</div>
<script>
onload = function() {
  scroller.scrollTop = 9950;
  scroller.scrollLeft = 50;
};
</script>