Teamur,
<!DOCTYPE html>
<meta charset='utf-8'>
<style>
body {
margin: 0
}
main {
width: 200px;
display: grid;
grid-template-rows: 24px 300px 24px;
margin: 100px auto 50vh;
user-select: none
}
#box {
border: 2px solid #000;
overflow-y: auto;
overscroll-behavior-y: contain
}
#bar,
#bot {
border: 2px solid #777;
padding-left: 1ch;
}
:is(#bar, #bot):hover {
background-color: #eee;
}
:is(#bar, #bot):active {
background-color: #ccc;
}
img {
display: block;
width: 100%;
}
.c {
outline: 5px solid #7cf;
outline-offset: -5px;
}
</style>
<main>
<div id=bar>0</div>
<div id=box></div>
<div id=bot>+ file</div>
</main>
<script>
'use strict';
const
oo = console.log,
{
assign: set
} = Object,
{
createObjectURL: url
} = URL,
{
round
} = Math,
el = document.createElement.bind(document),
mainViewTopCenter = function() {
let main = document.querySelector('main');
let pos = main.getBoundingClientRect();
let y = (document.documentElement.clientHeight - main.scrollHeight) / 2 - pos.top;
window.scrollBy(0, -y);
},
imgViewCenter = function(img) {
let y = (img.getBoundingClientRect().top - box.getBoundingClientRect().top) | 0;
box.scrollTop += y
},
imgToggle = function(img) {
let old = box.querySelector('img.c');
if (old && old !== img) old.classList.remove('c');
img.classList.toggle('c')
},
cl_move = (from, to, ...cl) => (from.classList.remove(...cl), to.classList.add(...cl), to),
FI = set(el('input'), {
type: 'file',
multiple: true,
accept: 'image/*',
onchange() {
for (let file of this.files) {
let image = el('img');
image.onload = function() {
imgToggle(image);
imgViewCenter(image);
}
image.src = url(file);
box.append(image);
};
}
});
set(box, {
onscroll() {
let t = box.querySelector('img.c');
t = t ? (t.getBoundingClientRect().top - box.getBoundingClientRect().top) | 0 : '?';
bar.textContent = round(box.scrollTop) + ', ' + t;
},
onclick({
target: t
}) {
if (t = t.closest('img')) imgToggle(t)
}
});
bar.onclick = function() {
let img = box.querySelector('img.c');
if (img) imgViewCenter(img);
};
bot.onclick = function() {
mainViewTopCenter();
FI.click();
};
ondragstart = () => false;
mainViewTopCenter();
</script>