pan.js adds native-like panning functionality using JavaScript for any element that is bigger than it’s container.
Optimized for iPad, iPhone and desktop browsers.

pan.js measures the element and it’s parent, so make sure you have a width/height for the elements and overflow:hidden for the parent.
See the demo included for a simple implementation.

Browser support: IE7+, FF3+, Opera 10+, Chrome, Safari, iPad and iPhone (and probably more devices as well).

--

New since 0.2: Options

Now you can pass options to the Pan using an object as second argument, example:

Pan(document.getElementById('pan'), {
    mousemove: true,
    smoothness: 4
});

Available options:

name        type     default   description
--------------------------------------------------------------------------------------------------------------------
mousemove   Boolean  false     pan when moving the mouse instead of click/drag (only affects desktop browsers)
fps         Number   80        Framerate per seconds, tune this to maximize performance on target devices
smoothness  Number   3.2       Decceleration multiplier. Adjust to suit your application.

--

Usage:
Pan( HTMLElement, Options ); // adds panning for the element

Destroy the pan:
var pan = new Pan( HTMLElement ); // adds panning
pan.destroy(); // removes all events