<style>
body {
margin: 0;
}
.group {
position: relative;
width: 350px;
height: 200px;
}
.scroller {
will-change: transform;
overflow: auto;
width: 350px;
height: 180px;
outline: 2px solid black;
}
.container {
width: 700px;
height: 180px;
}
.outerBox {
position: relative;
background-color: green;
width: 200px;
height: 180px;
}
.innerBox {
position: relative;
background-color: red;
width: 100px;
height: 180px;
}
</style>
<script>
window.addEventListener('load', function() {
for (const scroller of document.querySelectorAll('.scroller')) {
scroller.scrollLeft = 200;
}
});
</script>
<div class="group">
<div class="scroller">
<div class="container">
<div class="outerBox" style="left: 250px;">
<div class="innerBox" style="left: 0;"></div>
</div>
</div>
</div>
</div>
<div class="group">
<div class="scroller">
<div class="container">
<div class="outerBox" style="left: 250px;">
<div class="innerBox" style="left: 50px;"></div>
</div>
</div>
</div>
</div>
<div class="group">
<div class="scroller">
<div class="container">
<div class="outerBox" style="left: 250px;">
<div class="innerBox" style="left: 100px;"></div>
</div>
</div>
</div>
</div>