Add scrollbar to svg container

I'm using GetOrgChart to make an organization chart for my company, but I ran into a little problem.

If the SVG is bigger than the container we wish to add a scrollbar so you can use it to scroll since this will be a lot faster than dragging it all with your mouse.

I've tried this example but was unable to make it work.

Is there any way to achieve what I'm looking for?

The example below is way smaller than our actual chart, but it should be good enough to represent the problem.

var peopleElement = document.getElementById("people");
var orgChart = new getOrgChart(peopleElement, {
  primaryFields: ["name", "title", "phone", "mail"],
  photoFields: ["image"],
  scale: 0.4,
  dataSource: [{
      id: 1,
      parentId: null,
      name: "Amber McKenzie",
      title: "CEO",
      phone: "678-772-470",
      mail: "lemmons@jourrapide.com",
      adress: "Atlanta, GA 30303",
      image: "images/f-11.jpg"
    },
    {
      id: 2,
      parentId: 1,
      name: "Ava Field",
      title: "Paper goods machine setter",
      phone: "937-912-4971",
      mail: "anderson@jourrapide.com",
      image: "images/f-10.jpg"
    },
    {
      id: 3,
      parentId: 1,
      name: "Evie Johnson",
      title: "Employer relations representative",
      phone: "314-722-6164",
      mail: "thornton@armyspy.com",
      image: "images/f-9.jpg"
    },
    {
      id: 4,
      parentId: 1,
      name: "Paul Shetler",
      title: "Teaching assistant",
      phone: "330-263-6439",
      mail: "shetler@rhyta.com",
      image: "images/f-5.jpg"
    },
    {
      id: 11,
      parentId: 1,
      name: "Paul Shetler",
      title: "Teaching assistant",
      phone: "330-263-6439",
      mail: "shetler@rhyta.com",
      image: "images/f-5.jpg"
    },
    {
      id: 12,
      parentId: 1,
      name: "Paul Shetler",
      title: "Teaching assistant",
      phone: "330-263-6439",
      mail: "shetler@rhyta.com",
      image: "images/f-5.jpg"
    },
    {
      id: 5,
      parentId: 2,
      name: "Rebecca Francis",
      title: "Welding machine setter",
      phone: "408-460-0589",
      image: "images/f-4.jpg"
    },
    {
      id: 6,
      parentId: 2,
      name: "Rebecca Randall",
      title: "Optometrist",
      phone: "801-920-9842",
      mail: "JasonWGoodman@armyspy.com",
      image: "images/f-8.jpg"
    },
    {
      id: 7,
      parentId: 2,
      name: "Spencer May",
      title: "System operator",
      phone: "Conservation scientist",
      mail: "hodges@teleworm.us",
      image: "images/f-7.jpg"
    },
    {
      id: 8,
      parentId: 6,
      name: "Max Ford",
      title: "Budget manager",
      phone: "989-474-8325",
      mail: "hunter@teleworm.us",
      image: "images/f-6.jpg"
    },
    {
      id: 9,
      parentId: 7,
      name: "Riley Bray",
      title: "Structural metal fabricator",
      phone: "479-359-2159",
      image: "images/f-3.jpg"
    },
    {
      id: 10,
      parentId: 7,
      name: "Callum Whitehouse",
      title: "Radar controller",
      phone: "847-474-8775",
      image: "images/f-2.jpg"
    }
  ]
});

$('.get-left,.get-down,.get-up,.get-right').remove();

$(document).ready(function() {
  $(".get-oc-c").css("overflow","scroll");
})

#people {
  width: 90%;
  height: 90%;
  border:1px solid #000;
}

<link href="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.js"></script>
<div id="people"></div>

Solution

You can take a look at this jsfiddle. The .get-oc-c container shows the scroll bar if needed:

.get-oc-c {
  overflow: auto !important;
}

and the SVG chart element is wrapped in a div that is resized to accomodate the full chart:

function wrapChart() {
  ...
  $("svg").wrap("<div id='svgContainer'></div>");
  ...
}

#svgContainer {
  overflow: visible;
}

The wrapChart method is called in the updatedEvent. The chart move option is disabled to remove the arrows on the sides and to prevent panning:

var orgChart = new getOrgChart(peopleElement, {
  enableMove: false,
  ...
});

The original display seems to work but getting the correct size values for the wrapper element is difficult (the expression used in the jsfiddle is very empirical), and it gets even more complicated when the window is resized, when the links are expanded/collapsed and when the chart is zoomed. Some resizing uses animations, so the calculations would have to account for the delay before getting the final values.

The jsfiddle shows some simple code to restore the scroll position after expanding/collapsing nodes but it would need to be improved. I haven't written code to account for window resizing and for zooming.

Given the amount of work needed to make the scroll bars behave correctly, it is probably better to use the panning and moving features supplied by the component. You could also contact the creators of the component and ask them to add the scroll bar option.