Showing a diagram within a scrollable area

Question

Imagine I wish to have an area of my screen (eg. a box that is 500px by 500px) contain my diagram. If my diagram has a width or height large than this, I would like scroll bars to appear to allow me scroll the diagram. I tried to achieve this by placing my diagram within a sized <div> element but it seems that the diagram ignores this and it simply "spills out". Has anyone tried to achieve this and may be able to share a recipe?

By using the Chrome developer tools, I see that I do indeed have a <div> that is 500px by 500px which appears to contain an <svg> that has a width of 1082 and the whole width of the <svg> is shown even though the <svg> is contained withing the <div>.

Answer 1

When a <div> is created to hold the diagram and it is given a width and height, set its overflow css property to scroll. For example:

<div style="width: 500px; height: 500px; overflow: scroll;" />

See also this Stack Exchange answer that was the core of this jointjs solution about adding scroll bars to an <svg>.

How to get ScrollBars in SVG?