0

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.

ukyang
  • 3
  • 1
  • Hi and welcome to StackOverflow. Please refer to https://stackoverflow.com/help/how-to-ask on how to ask a proper question and improve yours according the guidelines. As a first step, please add the code you already tried and describe how it doesnt work for you. – Fabian S. Jan 24 '18 at 06:33

2 Answers2

0

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...).

bumbu
  • 1,297
  • 11
  • 29
0

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.

lionelbrits
  • 101
  • 1
  • 3