Question

我有一个可滚动的div，我可以缩放/缩放使用css3转换的内容。如果我放大（放大内容）它可以正常工作但我注意到当缩小时，低于100％，你可以垂直滚动容器div的数量不会减少。

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，我称之为视图包装器。我将其溢出设置为“隐藏”并手动设置其宽度和高度以匹配缩放内容应该是什么。

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。

Answer 2

你正在将变换应用到#content div，但是外部div，＃scrollable也有一个固定的高度，并没有减少。你也必须对它进行转换。

因为如果你正在放大，外部div会适应内部内容，而如果你正在减少则不适应。

如何使用缩放内容减少div的可滚动高度？

2 个答案: