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

Question

I am trying to create organization charts using BasicPrimitives API. This particular API takes a div id or class and fills its content with charts dynamically. I want to add zoom in and out functionality which API does not provide, however, I failed to achieve it. What I want is mimicing viewport in computer games where everything inside should be scaled up or down and every part should be visible via scrolling. I tried transform: scroll() on div but it does not scale entire content. Actually, I am not sure if it does or doesn't but I can't reach majority of my charts by scrolling. Then I tried zoomooz API but failed again. I checked this and this but I couldn't make it work.

My div is as follows:

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

Inside it, API that I am using creates another div which contains all charts etc. If I scale it with following code, scrolls can not reach some parts of diagram:

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

Together with upper code, I tried changing the height and with before and after scale but it didn't work as well. I am pretty new to web techs.

this is a screen shot of situation, Upper part is pre-scaled version. Lower part is post-scale. My question is, what's problem? Why scroll is acting weird after scale and how can I fix this.

PS: Sorry for censor but they are private information.

Answer 1

I think you should use padding-right or left (unsure which one because they acting differently then they supposse to sometimes) since it seems like they are the issue to "view diagram" or whatever you added there will appear. Example:

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

EDIT

I also suggest you use table or menu (ul, li) to make those diagrams, it a lot more easier and you can add :last-child so you can edit the last one to 10px right/left.

Answer 2

There is no need to do that. Chart supports zoom gesture on iPad. You can zoom in/out using CSS based scale transform, but it is ugly on regular browsers, so it is turned off. If you need equivalent zoom effect the best solution is to create 2-3 item templates having different size and auto switch between them. Or if you need smal chart, just make your item template small. See example at web site .