<!DOCTYPE html>
<style>
body {
height: 2000px;
margin: 0;
}
.sticky {
background: red;
height: 100px;
width: 100px;
overflow: hidden;
position: relative;
top: 100px;
}
.relative {
background: green;
height: 100px;
width: 100px;
position: relative;
}
#scroller {
left: 200px;
top: 100px;
height: 100px;
width: 120px;
overflow: auto;
position: absolute;
}
.spacer {
height: 1000px;
}
</style>
<script>
function doTest() {
window.scrollTo(0, 100);
document.getElementById('scroller').scrollTop = 100;
}
window.addEventListener('load', doTest, false);
</script>
<div class="sticky">
<div class="relative">
</div>
</div>
<div id="scroller">
<div class="sticky">
<div class="relative">
</div>
</div>
<div class="spacer"></div>
</div>