当缩放时,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

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

关于文档流向，顶部和左侧是块起始和内联起始侧，浏览器或UA的行为就好像内容超出该方向。

从W3C规范：滚动原点，方向和限制

由于网络兼容性的限制... UAS必须夹滚动容器滚动溢流区的块开始和直列开始边的盒子（从而表现得好像他们有在那边没有滚动溢出）。

可能有一个JS hack。我不确定。

以下是一些变通方法，以及更好的解释。

• CSS变形/ JS放大元素
• 画布方法

我能想到的最好的方法是添加此CSS .img-wrapper

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

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

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

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

这是您代码的Codepen编辑

Answer 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');
}
});

这是更新的小提琴检查。希望你一切都好