缩放时，div 不会在某些情况下放置滚动条

Question

这是我正在处理的一个简单的 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>

Answer 1

只需在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');
}
});

这里是Updated fiddle 看看这个。 希望你没事

Answer 2

坐标系从父元素的左上角开始。由于您是在点击时转换象限中图像的原点，因此您是从一个剪裁点开始的。

关于文档流向，顶部和左侧是 block-start 和 inline-start 边，浏览器或 UA 的行为就像内容被剪裁了一样那个方向。

From W3C specs: Scrolling Origin, Direction, and Restriction

由于 Web 兼容性限制 ... UA 必须在框 的 block-start 和 inline-start sides 上剪切滚动容器的可滚动溢出区域（因此表现得好像它们在那一侧没有可滚动溢出)。

可能存在 JS hack。我不确定。

这里有一些变通方法（带有）更好的解释。

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

---

在您的情况下，我能想到的最好的方法是为 .img-wrapper 添加此 CSS

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

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

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

这样您将在 1、2 和 3 象限中获得滚动条。在第四象限将启用滚动限制。

这是codepen edit of your code