<!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>