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

我使用d3缩放svg

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

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

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

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

这是JS Bin，因为Stackoverflow中的代码段的行为与预期不符：

var svg=d3.select（'svg'）；
变量body=d3。选择（'body'）；
调用（d3.zoom（）.on（'zoom'，function（））{
svg.node（）.setAttribute（'transform'，d3.event.transform）；
}));
正文{
背景：白色；
宽度：100%；
身高：100%；
溢出：自动；
}
svg{
背景：黄色；
宽度：1000px；
高度：500px；
}
.项目-1{
填充：蓝色；
x:489px；
y:38px；
宽度：64px；
高度：36px；
}
.项目-2{
填充：蓝色；
x:590px；
y:60px；
宽度：102.4px；
高度：60px；
}

JS-Bin
这很正常，顶部和左侧窗口边框不会触发滚动，这就是为什么您可以在不触发滚动条的情况下将div margin top或margin left设置为负数。
这似乎与此问题有关。当内容从顶部抛出时，没有滚动条，否则会出现负滚动。所以这里没有解决方案？我无法想象，我想象的是令人讨厌的一个，但我不想说，也许有一些解决方案存在于idk，目前我不太清楚，我想是的