我正在尝试使用 BasicPrimitives API 创建组织结构图。这个特定的 API 采用 div id 或类并动态地用图表填充其内容。我想添加 API 没有提供的放大和缩小功能,但是我没有实现。我想要的是模仿电脑游戏中的视口(viewport),其中所有内容都应该按比例放大或缩小,并且每个部分都应该通过滚动可见。我在 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:对不起审查员,但它们是私有(private)信息。
最佳答案
我认为您应该使用 padding-right
或 left
(不确定是哪一个,因为它们的行为与他们有时认为的不同)因为它们似乎是问题所在“查看图表”或您在那里添加的任何内容都会出现。
示例:
padding-right: 10px; /*same as left*/
编辑
我还建议你使用表格或菜单 (ul, li) 来制作这些图表,它更容易,你可以添加 :last-child
这样你就可以将最后一个编辑为 10px右/左。
关于javascript - 如何在外部 div 保持不变的情况下缩放整个嵌套 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18251990/