How to Get Scrollbars in Svg

Scroll bar in SVG element with D3

Basically I needed just to add a div element on top of the svg element and make the div smaller than the svg.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 World Map</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        div#halfpage{
        height: 900px;
        width: 800px;
        border:2px solid #000;
        overflow-y: auto;
        }
        svg#sky {
          height: 1000px;
          width: 1100px;
          border:1px dotted #ccc;
          background-color: #ccc;
       }
    </style>
  </head>
  <body>
  <script type="text/javascript">

  var elements = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

  var container = d3.select("body").append("div")
    .attr("id", "halfpage");

    var svgContainer = container.append('svg')
        //.attr('height', 100)
        //.attr('width', 100)
        .attr('id', 'sky');

    svgContainer.selectAll("rects1")
                .data(elements)
                .enter()
                .append("rect")
                .attr("width", 50)
                .attr("height", 20)
                .attr("x", 475)
                .attr("y", function(d, i){
                    return 100 * i;
                })
                .style("fill", "brown");

    </script>
  </body>

Answer comes from here: https://stackoverflow.com/a/11449016/2838794

How to gets ScrollBars in SVG for multiple content

At the moment the answer is that you need to provide your own panning/scrolling functions, there's no way to get scrollbars inside of the svg apart from possibly wrapping it inside another html container via foreignObject (which would likely be suboptimal).

Here are some resources to get you started with custom svg scrollbars:

http://www.carto.net/papers/svg/gui/scrollbar/
http://www.treebuilder.de/default.asp?file=67211.xml
http://www.dotuscomus.com/svg/lib/library.html

Add scrollbar to svg container

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.

Horizontal scrolling in SVG

In order for the scrolling to happen, you have to give the container a fixed width. The contents (the SVG) needs to have a width that is greater than the container element. Usually that means giving it a specific width, because otherwise it will just resize to its container.

.svgrow {
    max-width: 100vw;
    overflow-x: auto;
}
.svgrow svg {
    min-width: 70rem;
}

/* My CSS */
body { overflow-x: hidden;}.row { max-width: 100rem;}.svgrow {    max-width: 100vw;    overflow-x: auto;}.svgrow svg {    min-width: 70rem;}svg {    margin-bottom: 2.5em;}.off-canvas-toolbar { position: fixed; height: 100%; width: 8%;}

<div class="container">    <div class="off-canvas position-left" id="sidebar" data-off-canvas>
        
    </div>
    <div class="off-canvas-content" data-off-canvas-content>        <div class="off-canvas-toolbar">            <div class="custom-menu-icon" data-toggle="sidebar">                <i class="fa fa-bars">Icon</i>            </div>        </div>
        <div class="row svgrow">            <div class="small-12 columns">                <h1>Title</h1>
                <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1000">                    <polygon points="0,1000 60,0 2000,0 2000,1000" fill="#fdedbc"></polygon>                    <polygon points="70,1000 970,0 1800,1000" fill="#7c5b18"></polygon>                                    </svg>            </div>        </div>        <div class="row">            <div id="searchResult" class="small-12 columns" style="">
                <h2 class="center">Search Results</h2>
                <div class="small-12 medium-6 large-4 columns">                    <div class="searchResult">                        <div class="caption">                            Test <span class="creator">by User</span>                        </div>                    </div>                </div>                <div class="small-12 medium-6 large-4 columns">                    <div class="searchResult">                        <div class="caption">                            Test <span class="creator">by User</span>                        </div>                    </div>                </div>                <div class="small-12 medium-6 large-4 columns">                    <div class="searchResult">                        <div class="caption">                            Test <span class="creator">by User</span>                        </div>                    </div>                </div>            </div>
        </div>
        
    </div></div>

Make SVG scrollable in mobile

@G-Cyr solved the question in the comments. The two jsfiddles @G-Cyr provided do scroll in mobile: jsfiddle.net/3na9v6ps/5 or jsfiddle.net/3na9v6ps/6.

I tested them on my phone by adding /embedded/result to the urls.

The only change @G-Cyr needed to make to my code was to use overflow: auto on the container of the svg, instead of on the svg, and to use overflow: hidden on the container of the container.