Scrollbar only appear when the button of the svg reach bottom of his container

Question

I use d3 to zoom a svg.

I would like to display scrollbars only when a particular part of the svg is not visible (on my example the two rectangles).

My problem is, the scrollbar only appears when the bottom line of the svg reach the bottom line of the body. I would like the same for the top line.

On this picture the yellow background reach the bottom of body so to me it makes sens to get the scrollbar.

Why the scrollbar are not visible on the example? The top of the svg is not visible...

Here is the JS Bin, because the snippet in Stackoverflow does not behave as expected: http://jsbin.com/wewikokova/1/edit

var svg = d3.select('svg');
var body = d3.select('body');

body.call(d3.zoom().on('zoom', function() {
  svg.node().setAttribute('transform', d3.event.transform);
}));

body {
  background: white;
  
  width: 100%;
  height: 100%;
  
  overflow: auto;
}

svg {
  background: yellow;
  
  width: 1000px;
  height: 500px;
}

.item-1 {
  fill: blue;
  
  x: 489px;
  y: 38px;
  width: 64px;
  height: 36px;
}

.item-2 {
  fill: blue;
  
  x: 590px;
  y: 60px;
  width: 102.4px;
  height: 60px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" transform-origin="0 0" viewBox="489 38 203 82">
      <g>
     <rect class="item-1" />
    <rect class="item-2" />
   </g>
    </svg>
</body>
</html>

It seems to be related to this question https://stackoverflow.com/questions/27374111/how-can-i-have-scrollbar-when-position-is-negative. There are no scrollbar when the content throw by the top because otherwise there should be negative scrolling. — Charles, Sep 19 '17 at 09:18

score 0 · Answer 1 · answered Sep 19 '17 at 09:33

0

that was normal, top and left windows border not triger the scroll, that is why you can set div margin-top or margin left to minus without triger the scroll bar.

answered Sep 19 '17 at 09:33

KEKUATAN

948
7
21

So there are no solution here? – Charles Sep 19 '17 at 09:50
i cant imagine, what i imagine is nasty one, but i dont want say, maybe some solution exis that idk, for now with my little knowladge i asume yes – KEKUATAN Sep 19 '17 at 10:10

Scrollbar only appear when the button of the svg reach bottom of his container

1 Answers1