javascript - 如何减少带有缩放内容的 div 的可滚动高度？

Question

我有一个可滚动的 div，我使用 css3 变换缩放/缩放内容。如果我正在放大(放大内容)，它工作正常，但我注意到当缩小到 100% 以下时，容器 div 的垂直滚动量不会减少。

我做了 a jsfiddle to illustrate this

CSS:

.scrollable
{
    height: 250px;
    width: 250px;
    overflow: auto;
    background-color: green;
}

.content
{
    height :500px;
    width : 500px;
    background: linear-gradient(red, blue);
    ...
}

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

实际缩放比例和您可以水平滚动的数量完美无缺，但您可以垂直滚动的数量不会低于 100%。

注意:在第一次缩小/缩小时，您可以垂直滚动的量似乎会发生变化，但这仅仅是因为水平滚动条被移除了。

我尝试手动更改内容的高度，但这只会弄乱内容尺寸(duh)。这是注释掉的高度代码。

省略号是我为其他浏览器重复的地方。

Answer 1

我已经想出了一个解决方案，尽管它可能不是最好的。我在内容周围引入了另一个 div，我称之为 View 包装器。我将其溢出设置为“隐藏”并手动设置其宽度和高度以匹配缩放后的内容。

CSS:

.viewwrapper{
    height :500px;
    width : 500px;
    overflow: hidden
}

JS:

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

JS Fiddle

更新:

如果您使用的是 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',
    ...
    });
}

JSFiddle using jQuery 3.0

However this probably won't make it into future versions of jQuery.

更新 2:当您缩小内容时，您可能会在 Chrome 中看到不必要的滚动条。这是 down to a Chrome bug .