SVG not scrollable in Div Wrapper using overflow:scoll

Question

I would like to be able to scroll the full height of the svg in the wrapper div, but unfortunately it is not scrollable. Any help is appreciated.

The size of the rendered Tree Diagram within the SVG will be dynamic, and therefore I do not have fixed dimensions of the SVG.

The solution I am looking for is that a scrollbar allows me to view the entire svg within a wrapper whose height and width can be set using viewport height.

#vulcanWrapper {
  border:1px solid red;
  overflow: scroll;
  height:92vh;
  width: 100%;
}

#vulcanWrapper svg {
  height:88vh;
  width:90%;
  border:1px solid black;
}

You can view the source code on jsfiddle:

https://jsfiddle.net/intelligence_ai/0quz2pLL/3/

Screenshot:

your approach is wrong. You should create individual svg for each element, float them inside a div. and give overflow scroll to the parent of that div. — viCky
You just need to give #vulcanWrapper svg a larger height than #vulcanWrapper to scroll, no? — Robert Longson
@RobertLongson - Thanks for the response. To your comment - yes and no. The yes part is that you are correct, a bigger svg than the wrapper will be scrollable. The no part is that I don't know how big the svg will be as the elements within the svg are dynamically drawn using D3 via the data that is passed in. Using 4000px height: jsfiddle.net/intelligence_ai/eqyw7snd/4 Using no height: jsfiddle.net/intelligence_ai/xpLxswnb/2 There may be the case that the height of the svg needs to be dynamically calculated. — Ron I

ccprog ccprog · Accepted Answer · 2017-09-19T17:23:52

I have looked now at your code for half an hour, and I have to admit I don't understand how you compute the positioning of the nodes. Exchanging x and y certainly didn't help your case.

So, here is only the empirical evidence: remove the width and height value of the svg from CSS, and instead set a viewBox and a width attribute. For your dataset, this works:

viewBox="0 -2540 820 5130" width="820"

first value: 0, I think
second value: vertical translation of the topmost node
third value: total needed width. Set that also for the width attribute.
fourth value: node count * node height + bottom margin

I hope you can figure it out from here.

SVG not scrollable in Div Wrapper using overflow:scoll

1 Answers