Panzoom

A small ES6 module to add simple panning and zooming functionality to any DOM element. It includes cascading containers and the possibility of bounds (inner or outer). Handle touch events on touch devices. Only for modern borwsers.

You can see the main page usage instructions here

Example 1

Simple pan and zoom without bounds

The container has style with position:absolute; overflow:hidden; touch-action:none;

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

Example 2

Simple pan and zoom with inner bounds

The container has style with position:absolute; overflow:hidden; touch-action:none;

panzoom('#element2', {
   bound: 'inner'
});
	

Example 3

Simple pan and zoom with outer bounds

The container has style with position:relative; overflow:hidden; touch-action:none;

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

Example 4

Multiple Containers

The container has style with position:relative; overflow:hidden; touch-action:none;

panzoom('#element4', {
   bound: 'outer'
});
panzoom('#child4', {
   bound: 'inner'
});
	

Hope it helps you4 !!!

Any suggestion: cmorillas1@gmail.com