Question

这是我正在处理的事情的简单HTML占位符。你可以忽略其余的（我希望！）并专注于这个唯一的问题：

图像上的缩放效果正常，并且它会按照我想要的方式聚焦在您按下的象限上。但如果在左上象限进行缩放，它只会放置顶部和底部滚动条。

我希望它始终显示滚动条。我错过了什么？

由于

＆＃13;

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;
        }
    }
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

关于文档流向，左上角是块开始，内联起始端，浏览器或UA的行为就好像内容被剪裁一样那个方向。

From W3C specs: Scrolling Origin, Direction, and Restriction

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

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

以下是一些解决方法（有）更好的解释。

我能想到的最好的方法是为.img-wrapper

添加这个CSS

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

并在{last}语句中将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

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

这是Updated fiddle这个问题。希望对你没问题

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

2 个答案: