Skip to main content



Friction values are inside [0, 1) interval, where 0 would change instantly, but 0.99 would update extremely slowly.

panOnlyZoomed {Boolean}#

Disable dragging if scale level is equal to value of baseScale option. Default: false

lockAxis {Boolean}#

Lock axis while dragging. Default: false
Possible values: false | "x" | "y" | "xy"

friction {Number}#

Friction while panning/dragging. Default: 0.72

decelFriction {Number}#

Friction while decelerating after drag end. Default: 0.92

zoomFriction {Number}#

Friction while scaling. Default: 0.72

bounceForce {Number}#

Bounciness after hitting the edge. Default: 0.1

baseScale {Number}#

Initial scale level. Default: 1

minScale {Number}#

Minimum scale level. Default: 1

maxScale {Number}#

Maximum scale level. Default: 2

step {Number}#

Default scale step while scaling. Default: 0.5

zoomInCentered {Boolean}#

Should content be centered while scaling or moved towards given coordintes, if coordinates are outside the content. Default: true

pinchToZoom {Boolean}#

Enable pinch gesture to zoom in/out using two fingers. Default: true

textSelection {Boolean}#

Allow to select text. If enabled, dragging will be disabled when text selection is detected. Default: true

click {Boolean|function|String}#

Add click event listener. Default: toggleZoom
Possible values: true, false, function(){} or toggleZoom

clickDelay {Number}#

Delay required for two consecutive clicks to be interpreted as a double-click. Default: 250

doubleClick {Boolean|function|String}#

Enable doubleClick event. Default: false
Possible values: true, false, function(){} or toggleZoom

wheel {Boolean|function|String}#

Add wheel event listener. Default: zoom
Possible values: true, false, function(){} or zoom

wheelFactor {Number}#

Value for zoom on mouse wheel. Default: 30

wheelLimit {Number}#

Number of wheel events after which it should stop preventing default behaviour of mouse wheel. Default: 3

touch {Boolean}#

Enable touch guestures. Default: true

draggableClass {String}#

Class name added to $viewport element to indicate if content is draggable. Default: is-draggable

draggingClass {String}#

Class name added to $viewport element to indicate that user is currently dragging. Default: is-dragging