При увеличении, div не размещает полосы прокрутки в определенных случаях

Это простой 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>

Ответ 1

Система начинается с левого верхнего угла родительского элемента. Поскольку вы трансформируете исходное изображение изображения в своем квадранте при щелчке, вы начинаете его с обрезанной точки.

В отношении направлений потока документов верхняя и левая стороны - это блок-старт и сторонние строки, а браузеры или UA ведут себя так, как будто содержимое обрезается за пределы это направление.

Из спецификаций W3C: Прокрутка Происхождение, Направление и Ограничение

Из-за ограничений веб-совместимости... UA должны закрепить прокручиваемую область переполнения контейнеров прокрутки на block-start и вставные стороны в поле (таким образом, они ведут себя так, как будто они не имеют прокручиваемое переполнение с этой стороны).

Может быть взломан JS. Я не уверен.

Вот несколько пояснений (с) более подробных объяснений.

Лучшее, что я мог придумать в вашем случае, - добавить этот CSS для .img-wrapper

.img-wrapper {
  height: 100%;
  width: 100%;    
  overflow: auto
}

и добавьте overflow: auto; в imgPlace.setAttribute() в свой последний оператор

imgPlace.setAttribute("style", "transform-origin: "+ tro + " 0px; transform: scale(2);position: relative;overflow: auto;");

Таким образом, вы получите полосы прокрутки в квадранте 1, 2 и 3. В четвертом квадранте ограничение прокрутки будет включено.

Вот codeepen редактирование вашего кода

Ответ 2

Просто создайте два новых класса в css

.zoomed {
  transform:scale(2);
}
.scroll {
  overflow:scroll;
}

Добавьте код jquery

$ ('#img_wrapper').click(function() {
var top = $('#img_place').height() / 2;
$('#img_place').toggleClass('zoomed');
$(this).toggleClass('scroll');
if ($('#img_place').hasClass('zoomed')) {
$('#img_place').css('top', top);
}
else {
$('#img_place').css('top', '0');
}
});

Здесь Обновлена скрипка. Надеюсь, это будет хорошо для вас.