blob: 03a4030bf7dc9fdc848ee9f7c038a9ad80c43e6e [file] [log] [blame]
<style>
body {
margin: 0;
}
.group {
display: inline-block;
position: relative;
width: 250px;
height: 350px;
}
.scroller {
overflow: auto;
width: 200px;
height: 350px;
outline: 2px solid black;
}
.container {
width: 200px;
height: 700px;
}
.outerBox {
position: relative;
background-color: green;
width: 200px;
height: 200px;
}
.innerBox {
position: relative;
background-color: red;
width: 200px;
height: 100px;
}
</style>
<script>
window.addEventListener('load', function() {
for (const scroller of document.querySelectorAll('.scroller')) {
scroller.scrollTop = 200;
}
});
</script>
<div class="group">
<div class="scroller">
<div class="container">
<div class="outerBox" style="top: 250px;">
<div class="innerBox" style="top: 0;"></div>
</div>
</div>
</div>
</div>
<div class="group">
<div class="scroller">
<div class="container">
<div class="outerBox" style="top: 250px;">
<div class="innerBox" style="top: 50px;"></div>
</div>
</div>
</div>
</div>
<div class="group">
<div class="scroller">
<div class="container">
<div class="outerBox" style="top: 250px;">
<div class="innerBox" style="top: 100px;"></div>
</div>
</div>
</div>
</div>