2017-09-19 41 views
-1

我使用d3缩放svg。滚动条仅在svg的按钮到达其容器底部时出现

我只想显示滚动条,当svg的特定部分不可见(在我的例子中是两个矩形)。

我的问题是,滚动条只有在svg的底线到达主体的底线时才会出现。我希望同样的顶线。

在这幅图片上,黄色的背景到达了身体的底部,所以对于我来说它让人感觉得到滚动条。

enter image description here

为什么滚动条不在的例子可见?该SVG的顶部是不可见的...

enter image description here

这里是JS斌,因为预计在#1片断并不表现: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>

+0

它似乎与此问题相关https://stackoverflow.com/questions/27374111/how-can-i-have-scrollbar-when-position-is-negative。当内容抛出顶部时没有滚动条,否则应该有负向滚动。 – Charles

回答

0

这是正常的,顶部和左边的窗口边框不滚动滚动条,这就是为什么你可以设置div margin-top或保留边界为零而没有滚动条的滚动条。

+0

那么这里没有解决方案? – Charles

+0

我无法想象,我想象的是讨厌的人,但我不想说,也许一些解决方案exis,idk,现在与我的小知识我asume是 – KEKUATAN

相关问题