I can’t wrap my head around it.
The element exists in a nested hierarchy of multiple scrollable DIV elements rather than in a single scrollable document window.
One of my headaches is how scrolled.offsetParent is document.body (colour papayawhip) instead of scrollable (colour pink).
Solutions to this problem based on JQuery and other libraries are acceptable only as complementary – for the benefit of other users, not me.
Test code
<script>
function ReportExpression(ExpressionString) {
retu ExpressionString + " == " + eval(ExpressionString) + "n";
}
function ButtonClick() {
var scrollable = document.querySelector('#scrollable');
var scrolled = document.querySelector('#scrolled');
alert(
ReportExpression("scrollable.scrollTop") +
ReportExpression("scrolled.offsetTop") +
ReportExpression("(scrolled.offsetParent == document.body)")
);
scrollable.scrollTop = scrolled.offsetTop;
}
</script>
<style>
html {background-color: white;}
body {text-align: center; background-color: papayawhip;}
#page {
display: inline-block;
text-align: left;
width: 500px;
height: 500px;
overflow: auto;
background-color: powderblue;
padding: 10px;
}
#scrollable {
height: 500px;
overflow: auto;
background-color: pink;
}
</style>
<body>
<div id="page">
<button onClick="javascript:ButtonClick();">Scroll</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="scrollable">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<text id="scrolled">I want to scroll all scrollbars to this element.</text>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>