Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<head>
<style>
.group {
border: solid black 1px;
padding: 20px;
margin: 10px;
width: max-content;
}
.spacer {
height: 1000px;
}
.scroller {
display: inline-block;
outline: 1px solid black;
margin: 0 10px;
padding: 0;
border: 0;
overflow-y: scroll;
width: 200px;
height: 200px;
}
.scroller-zoomed {
display: inline-block;
outline: 1px solid black;
margin: 0 10px;
padding: 0;
border: 0;
overflow-y: scroll;
width: 200px;
height: 200px;
}
.target {
position: fixed;
height: 100px;
width: 100px;
background-color: black;
}
.target-zoomed {
position: fixed;
height: 100px;
width: 100px;
background-color: black;
}
</style>
</head>
<body>
<p>Each grouping below should have two matching boxes.</p>
<div class="group">
<div class="scroller" id="scroller1">
<div class="target" id="target1"></div>
<div class="spacer"></div>
</div>
<div class="scroller" id="scroller2">
<div class="target" id="target2"></div>
<div class="spacer"></div>
</div>
</div>
<div class="group">
<div class="scroller-zoomed" id="scroller3">
<div class="target-zoomed" id="target3"></div>
<div class="spacer"></div>
</div>
<div class="scroller-zoomed" id="scroller4">
<div class="target-zoomed" id="target4"></div>
<div class="spacer"></div>
</div>
</div>
<script>
window.addEventListener('load', function() {
const target1 = document.getElementById('target1');
const target2 = document.getElementById('target2');
const target3 = document.getElementById('target3');
const target4 = document.getElementById('target4');
const scroller1 = document.getElementById('scroller1');
const scroller2 = document.getElementById('scroller2');
const scroller3 = document.getElementById('scroller3');
const scroller4 = document.getElementById('scroller4');
const maxScroll1 = scroller1.scrollHeight - scroller1.clientHeight;
scroller1.scrollTop = (maxScroll1 + 300) * 0.5;
const maxScroll2 = scroller2.scrollHeight - scroller2.clientHeight;
scroller2.scrollTop = (maxScroll2 + 300) * 0.5;
const maxScroll3 = scroller3.scrollHeight - scroller3.clientHeight;
scroller3.scrollTop = (maxScroll3 + 300) * 0.5;
const maxScroll4 = scroller4.scrollHeight - scroller4.clientHeight;
scroller4.scrollTop = (maxScroll4 + 300) * 0.5;
});
</script>
</body>
</html>