javascript – 放大时,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>

解决方法

坐标系从父元素的左上角开始.由于您是在单击时在您的象限中转换图像的起始位置,所以您将从剪辑点开始.

关于文档流动方向,顶部和左侧是块启动和内联起始侧和浏览器,或者UA的行为就好像内容被限制在该方向之外.

From W3C specs: Scrolling Origin,Direction,and Restriction

Due to Web-compatibility constraints … UAs must clip the scrollable overflow region of scroll containers on the 07001 and 07002 of the Box (thereby behaving as if they had no scrollable overflow on that side).

可能有一个JS黑客.我不确定.

这里有一些解决方法(更好的解释).

> CSS Transforms / JS to zoom into element
> Canvas Method

在你的情况下,我能想到的最好的方法是为.img-wrapper添加这个CSS

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

并添加overflow：auto;到最后一个else语句中的imgPlace.setAttribute()

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

这样就可以在象限1,2和3中得到滚动条.在第四个象限滚动限制将被启用.

这是codepen edit of your code