私はSVGをズームするのにd3を使います。スクロールバーは、SVGのボタンがコンテナの底に達すると表示されます
スクロールバーは、svgの特定の部分が表示されない場合(私の例では2つの矩形)にのみ表示したいと考えています。
私の問題は、スクロールバーは、svgのボトムラインがボディのボトムラインに達するときにのみ表示されることです。私は一番上の行についても同じことを望みます。
この写真では、黄色の背景が体の底に届くので、私にはスクロールバーを取得する感覚を与えます。
なぜスクロールバーを例に表示されませんか? SVGのトップが表示されていない予想通りのStackOverflowでのスニペットは動作しませんので...ここで
は、JSビンです: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>
\t \t \t <rect class="item-1" />
\t \t \t \t <rect class="item-2" />
\t \t \t </g>
</svg>
</body>
</html>
この質問に関連しているようですhttps://stackoverflow.com/questions/27374111/how-can-i-have-scrollbar-when-position-is-negativeコンテンツがトップにスローされるときはスクロールバーがありません。 – Charles