I have a svg element, displayed in a normal div (fiddle here)
window.panZoom = svgPanZoom('#limit-svg', {
zoomEnabled: true,
controlIconsEnabled: true,
minZoom: 1,
maxZoom: 10,
beforePan: beforePan
});
As it is now, the zoom stops at 1 vertically, so I'm unable to move up or down, but there's horizontal movement that I have to get rid of.
I need to invert the code, stopping the zoom horizontally, so moving ltr or rtl is not possible (But this only at natural zoom, 1, applying zoom would still be moving normally at all directions). Leaving moving up or down accessible, because there'll be more svg to be seen.
I tried everything I could, this was the best I could come up with.
Found an answer!
window.panZoom.contain()
window.panZoom.setMinZoom(window.panZoom.getZoom())
What this does is contain sets to the state I want, overflowing at top and bottom, and fixed at left and right. When I set the minimum zoom to the current zoom, now the zoom won't go minus the previous contain zoomed figure.
I want to keep this post here, because a lot of people in my searches are looking for the same answer.