Это простой HTML-заполнитель для того, над чем я работаю. Вы можете игнорировать остальные (я надеюсь!) И сосредоточиться на этой единственной проблеме:
Масштабирование изображения работает, и оно фокусируется на квадранте, на который вы нажимаете, как я этого хочу. Но он только устанавливает верхнюю и нижнюю полосы прокрутки, если масштаб сделан в верхнем левом квадранте.
Я хочу, чтобы он всегда показывал полосы прокрутки. Что мне не хватает?
Спасибо
var images = ["Species_copy_number.png", "Species_coverage.png", "Species_distribution.png", "Gene_copy_distribution.png"];
var descriptions = ["cariño", "muis bueno", "caliente", "CABRÓN!"];
var titles = ["ay", "ay ay", "ay ay ay", "AY AY AY MI HIJJJJJJOOOOOOOOOOOOO"];
function changeImage(index){
var img = document.getElementById("img_place");
img.src = "Figures/" + images[index];
document.getElementById("desc_place").textContent = descriptions[index];
document.getElementById("subtitle").textContent = titles[index];
}
window.zoomedIn = false;
window.onload = function(){
var canvas = document.getElementById("img_wrapper");
canvas.onclick = function(event){
var imgWrapper = this, zoomContainer = document.getElementById("zoom-container");
var imgPlace = document.getElementById("img_place");
if (window.zoomedIn) {
imgPlace.setAttribute("style", "transform :\"\"");
window.zoomedIn = false;
} else {
var width = zoomContainer.offsetTop + zoomContainer.offsetWidth;
var height = zoomContainer.offsetTop + zoomContainer.offsetHeight;
var tro = (zoomContainer.offsetTop + event.clientY > height / 2) ? "bottom" : "top";
tro += (zoomContainer.offsetLeft + event.clientX > width / 2) ? " right" : " left";
imgPlace.setAttribute("style", "transform-origin: "+ tro + " 0px; transform: scale(2);");
window.zoomedIn = true;
}
}
}
body, html { height: 100%; }
.flex-container {
display: -webkit-flex;
display: -ms-flex;
display: -moz-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.flex-item {
display: -webkit-flex;
display: -ms-flex;
display: -moz-flex;
display: flex;
margin: 3px;
padding: 0 0 10px;
}
.flex-item img{
width: 100%;
}
span {
min-width: 5em;
margin-top: 3em;
padding-right: 1em;
}
a {
padding-left: 0.3em;
}
.img-wrapper {
border: 1px solid gray;
}
img {
height: 100%;
width: 100%;
}
#zoom-container{
overflow: auto;
}
<h1>Mega title</h1>
<h2 id="subtitle">Title</h2>
<div class="flex-container">
<div class="flex-item">
<span>
cenas<br>
<a href="#" onclick="changeImage(0)">Img #1</a>
<a href="#" onclick="changeImage(1)">Img #2</a>
cenas<br>
<a href="#" onclick="changeImage(2)">Img #3</a>
<a href="#" onclick="changeImage(3)">Img #4</a>
</span>
<div id="zoom-container">
<div id="img_wrapper" class="img-wrapper">
<img id="img_place" src="https://i.ytimg.com/vi/ddqvuwXBK5k/maxresdefault.jpg"/>
</div>
</div>
</div>
</div>
<h2>Description</h2>
<span id="desc_place">Description</span>