javascript - 缩放时，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

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

关于文档流向，顶部和左侧是block-start 和inline-start side，浏览器或 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 block-start and inline-start sides 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
}

并在最后一个 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