J'utilise d3 pour zoomer un svg.La barre de défilement n'apparaît que lorsque le bouton du svg atteint le fond de son conteneur
Je voudrais afficher les barres de défilement seulement lorsqu'une partie particulière du svg n'est pas visible (sur mon exemple les deux rectangles).
Mon problème est, la barre de défilement n'apparaît que lorsque la ligne du bas du svg atteint la ligne du bas du corps. Je voudrais la même chose pour la ligne supérieure.
Sur cette image, le fond jaune atteint le bas du corps, donc pour moi, il est logique d'obtenir la barre de défilement.
Pourquoi la barre de défilement ne sont pas visibles sur l'exemple? Le sommet de la svg n'est pas visible ...
Voici la JS Bin, parce que l'extrait dans Stackoverflow ne se comporte pas comme prévu: 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>
Il semble être lié à cette question https://stackoverflow.com/questions/27374111/how-can-i-have-scrollbar-when-position-is-negative. Il n'y a pas de barre de défilement quand le contenu est lancé par le haut, sinon il devrait y avoir un défilement négatif. – Charles