如何在外部div保持相同的情况下缩放整个嵌套div

Question

我正在尝试使用BasicPrimitives API创建组织结构图。此特定API采用div id或类，并动态地使用图表填充其内容。我想添加API没有提供的放大和缩小功能，但是，我没能实现它。我想要的是在计算机游戏中模仿视口，其中内部的所有内容都应该按比例放大或缩小，并且每个部分都应该通过滚动显示。我在div上尝试了transform: scroll()，但它没有扩展整个内容。实际上，我不确定它是否存在但是我无法通过滚动来达到我的大部分图表。然后我尝试了zoomooz API但又失败了。我检查了this和this，但我无法正常工作。

我的div如下：

<div id="diagram" style="height: 400px; width: 946px;">
</div>

在其中，我使用的API会创建另一个包含所有图表等的div。如果我使用以下代码进行缩放，则滚动无法到达图表的某些部分：

jQuery(".orgdiagram > div").css({
    transform: "scale(1.25)"
});

与上面的代码一起，我尝试更改高度以及之前和之后的比例但是它也不起作用。我是网络技术人员的新手。

this是情景的屏幕截图，上半部分是预缩放版本。下半部分是后缩放。我的问题是，有什么问题？为什么滚动在缩放后表现得很奇怪，我该如何解决这个问题。

PS：对于审查员很抱歉，但他们是私人信息。

Answer 1

我认为你应该使用padding-right或left（不确定哪一个，因为他们的行为不同，有时候他们会有所不同），因为它们似乎是“查看图表”或者你添加的任何内容的问题会出现。 例如：

padding-right: 10px; /*same as left*/

修改

我还建议您使用表格或菜单（ul，li）制作这些图表，它更容易，您可以添加:last-child，这样您就可以将最后一个编辑为10px左/右。

Answer 2

没有必要这样做。图表支持iPad上的缩放手势。您可以使用基于CSS的缩放变换进行放大/缩小，但在常规浏览器上它很难看，因此它已关闭。如果您需要等效的缩放效果，最佳解决方案是创建具有不同大小的2-3个项目模板并在它们之间自动切换。或者如果您需要小图表，只需将您的项目模板缩小即可。请参阅example at web site。