JavaScript Library For Panning & Zooming Elements – Panzoom

Preview:

Description:

Panzoom is a lightweight JavaScript library (ES6) for panning & zooming any elements within a container.

Supports mouse drag, mouse wheel, and touch gestures.

How to use it:

1. Import the Panzoom into the document.

import {panzoom} from './src/panzoom.js';

// OR
<script src="./dist/panzoom.min.js"></script>

2. Pan and Zoom with inner bounds.

<div id="container">
  <div id="example">Element To Pan And Zoom</div>
</div>

panzoom('#example');

3. Pan and Zoom with outer bounds.

panzoom('#example', {
  bound:'outer'
});

4. Pan and Zoom without bounds.

panzoom('#example', {
  bound:'none'
});

5. Enable/disable pan & zoom behaviors.

panzoom('#example', {
  pan: true,
  zoom: true
});

6. More configuration options.

panzoom('#example', {
  wheel_step: 0.2 // 0.01 - 0.4
  scale_min: 0.01, // 0.01 - 20	
  scale_max: 10, // 0.01 - 20	
});