Menu
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 in test code below) rather than 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 mine.
(Original location: JSFiddle.)
function ReportExpression(ExpressionString) {
return 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;
}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;}<body>
<div id="page">
<button onClick="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>
229
How about this?:
function ButtonClick() {
var page = document.querySelector('#page');
var scrollable = document.querySelector('#scrollable');
var scrolled = document.querySelector('#scrolled');
page.scrollTop = scrollable.offsetTop-page.offsetTop;
scrollable.scrollTop = scrolled.offsetTop-scrollable.offsetTop;
}
Just make it like a href anchor and go to that anchor.
<button onClick="document.location+='#scrolled';return false;">Scroll</button>
According to the first of the links you said you studied, I have applied one solution from there.
element = document.getElementById("scrollable");
alignWithTop = true;
element.scrollIntoView(alignWithTop);
elementB = document.getElementById("scrolled");
alignWithTopB = true;
elementB.scrollIntoView(alignWithTopB);
Live demo: https://jsfiddle.net/yt22fwc0/
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
