View the demo.
Panzoom is a small library to add panning and zooming functionality to an element. Rather than using absolute positioning or setting width and height, Panzoom uses CSS transforms to take advantage of hardware/GPU acceleration in the browser, which means the element can be anything: an image, a video, an iframe, a canvas, text, WHATEVER.
Panzoom uses [pointer events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) and falls back to touch and mouse events.
It even supports pinch gestures for zooming. It is perfectly suited for both mobile and desktop browsers.
Panzoom supports panning and zooming SVG elements directly, with the caveat that CSS transitions on SVG do not work in IE.
Panzoom is incredibly customizable. Some features include:
- Focal point zooming using a mousewheel on desktop and pinch gestures on mobile.
- Disabling all combinations of panning and zooming (There's not a lot of overhead if using this plugin just for dragging or zooming alone).
- Containing the panzoom element within it's parent.
For more information, documentation is available in the README.