Question

我使用d3来缩放svg。

我想仅在svg的某个特定部分不可见时显示滚动条（在我的例子中是两个矩形）。

我的问题是，只有当svg的底线到达正文的底线时才会出现滚动条。我希望顶线也一样。

在这张照片上，黄色背景到达了身体的底部，所以对我来说，获得滚动条很有意义。

为什么滚动条在示例中不可见？ svg的顶部不可见......

这是JS Bin，因为Stackoverflow中的代码段没有按预期运行：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>

Answer 1

这是正常的，顶部和左侧窗口边框不会使滚动变为三角形，这就是为什么你可以将div margin-top或margin left设置为minus而不用滚动条。

仅当svg的按钮到达其容器底部时才会显示滚动条

1 个答案: