Javascript 如何减少具有缩放内容的div的可滚动高度？

我有一个可滚动的div，可以使用css3转换缩放内容。如果我放大（放大内容）效果很好，但是我注意到当缩小到100%以下时，容器div的垂直滚动量并没有减少

我做了

CSS:

JS/jquery：

function scaleContent(newScale){
    var $content = $("#content");
    var scaleString = "scale("+newScale+")";
    //var height = (newScale<1)? $("#content").height()/scale*newScale : originalHeight;
    $content.css({
    '-webkit-transform' : scaleString,
    '-webkit-transform-origin' : '0 0',
    ...
    //'height' : height +'px'
    });
    scale=newScale;
}

函数scaleContent（newScale）{
var$content=$（“#content”）；
var scaleString=“scale”（+newScale+”）；
//var height=（newScale您正在对#content div应用转换，但是外部div#scrollable也有一个固定的高度，并且没有减少。您也必须对其应用转换

因为如果你放大，外部div会适应内部内容，而如果你缩小，则不会。
我设法想出了一个解决方案，尽管它可能不是最好的。我在内容周围引入了另一个div，我称之为视图包装器。我将其溢出设置为“隐藏”并手动设置其宽度和高度，以匹配缩放的内容

CSS:

JS:


更新：

如果您使用的是jQuery 3.0或3.1，这将不起作用。高度和宽度函数的读取行为已更改，因此它们返回缩放值。要修复这些版本的上述代码，您可以说

function scaleContent(newScale){
    var $content = $("#content");
    var scaleString = "scale("+newScale+")";
    var $viewwrapper = $("#viewwrapper");
    $viewwrapper.height($content.height());
    $viewwrapper.width($content.width());
    $content.css({
        '-webkit-transform' : scaleString,
        '-webkit-transform-origin' : '0 0',
    ...
    });
}



更新2：
当您缩小内容时，您可能会在Chrome中看到不必要的滚动条。这是。
Edit:我的上一条评论是胡说八道：缩放可滚动条会导致可滚动条的大小改变。-/您是指其他内容吗？“因为如果您放大，外部div会适应内部内容，而如果您缩小，则不会。”这是另一件对我来说很奇怪的事情；它实际上对宽度有影响，但对高度没有影响。不，这就是我的意思，你在上一次小提琴中所做的。现在看起来不错，或者可能我误解了你的问题。关于高度不降低似乎有点奇怪，不知道为什么。不，对不起，不是这样。我希望滚动容器div保持不变e size，但内部div要按大小缩放。问题是，如果您缩小内容，容器的垂直滚动条不会变小，因此您可以滚动原始未缩放内容的长度。我可以从我的措辞中看出混淆。当我说“可滚动高度”我的意思是你可以滚动的高度，而不是被称为scrollable的元素的高度。@sissy的回答如下：我希望滚动容器div保持不变，但内部div要按比例缩放。问题是，如果你缩小内容，容器的垂直滚动条不会变小，所以你可以滚动原始未缩放内容的长度。我可以从我的措辞中看出混淆。当我说“可滚动高度”时我的意思是你可以滚动的高度，而不是称为scrollable的元素的高度。我将编辑我问题的措辞。我添加了我自己的答案，使用另一个div来包装内容并限制内容的查看。这并不理想，因为我真的不想给我的DOM增加任何复杂性，所以我仍然对更好的答案持开放态度答案。
.viewwrapper{
    height :500px;
    width : 500px;
    overflow: hidden
}

function scaleContent(newScale){
    var $content = $("#content");
    var scaleString = "scale("+newScale+")";
    var $viewwrapper = $("#viewwrapper");
    var height = $content.height()/newScale;
    var width = $content.width()/newScale;
    $viewwrapper.height(height);
    $viewwrapper.width(width);
    $content.css({
        '-webkit-transform' : scaleString,
        '-webkit-transform-origin' : '0 0',
    ...
    });
}

function scaleContent(newScale){
    var $content = $("#content");
    var scaleString = "scale("+newScale+")";
    var $viewwrapper = $("#viewwrapper");
    $viewwrapper.height($content.height());
    $viewwrapper.width($content.width());
    $content.css({
        '-webkit-transform' : scaleString,
        '-webkit-transform-origin' : '0 0',
    ...
    });
}