滚动条仅在svg的按钮到达其容器底部时出现

问题描述：

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

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

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

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

这里是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>

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

答

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

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

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

滚动条仅在svg的按钮到达其容器底部时出现

相关推荐