CODEWITHSUNDEEP
javascriptsvg.jssvgpanzoom
ukyang
ukyang

Reputation: 3

How to display scrollbar in svg-pan-zoom?

I would like to know how can I enable the scrollbar while zooming with svg-pan-zoom.

I've tried overflow: auto on external div or svg tag with no luck.

Hopefully I can get some help here.

Upvotes: 0

Views: 949

Answers (2)

lionelbrits
lionelbrits

Reputation: 101

For anyone who comes across the problem, the best solution (hack) I've come up with is to set the container div to overflow: auto, set the svg element width and height to the width and height of the container div, set the position of the svg element to absolute, and then place a second div alongside the svg element. Then you need to synchronize size of the second div to the "true" size of the svg which you can get by calling getBBox() on the svg element, plus any scaling you have incurred by zooming. Thus the second div forces the containing div to have scroll bars. Similarly you need to synchronize the pan events with the scrollbars of the container, and vice versa.

When everything is said and done, panning and zooming happens through svg transformations that are synchronized with the scroll bars of the parent div, and happens completely transparently to the user.

Upvotes: 0

bumbu
bumbu

Reputation: 1317

There is no way to have scrollbars by default inside of svg-pan-zoom as it's essentially an SVG, and inside of an SVG things behave like they're overflow: hidden. You'll have to implement scrollbars by yourself (render some elements that would look like scrollbars, compute their size and position...).

Upvotes: 0

Related Questions