JQuery DragScroller plugin


View page source to grab the code. Download plugin from jQuery repository

Simple DragScroller

Advanced DragScroller


The DragScroller JQuery plugin offers a viewport in which registered objects are scrollable by dragging the background and the scroll is performed according to the wideness of the gesture, applying a smooth deceleration if desired. Furthermore it supports advanced customizability to allow to handle viewport clipping while redrawing.


canvasSelector a valid jQuery selector to retrieve the canvas. If not specified, the canvas is created on the caller item (which is a desidered behaviour).

canvasItemsSelector a valid jQuery selector to retrieve the canvas items. If not specified, all the children of the canvas element are considered to be dragged.

attrition a value in the range (0, 1] that tells how much the drag gesture is translated into a smooth scrolling. Note that a value of 0 will result in an endless scroll, while if this parameter is 1 or above one the scroll amount corresponds exactly to the length of the drag vector (calculated from drag end point to drag start point).

enabled a flag to interrupt/enable the feature introduced by the plugin. This methods called with false as parameter suspends the execution of the plugin code until the same method is called passing true as parameter. If you wish to remove completely the functionality from the referenced canvas, call destroy instead.

updateFunction an user defined function that handles specific needs after the canvas viewport is moved, prior to redrawing it. For example, it might be necessary to clip objects far from the viewport to improve performance.

redrawFunction an user defined function called after any viewport movement to redraw the canvas, one time for each canvas item to scroll. The built in one, overridden by the one specified in this parameter if any, simply positions each item to its new position using css.


destroy Remove the drag-scroll functionality completely. This will return the element back to its pre-init state.

position If called without parameters, retrieve the current absolute position of the viewport. Otherwise it takes position (an array of length 2) as first parameter, containing the x-axis and y-axis coordinates of the new position to set; if a second additional parameter relative is true, the position offsets will be intended to be relative to the current viewport position

selector Get/set the value of the canvasItemsSelector option.

attrition Get/set the value of the attrition option.

enable Get/set the value of the enable option.

redraw Get/set the function for the redrawFunction option.

update Get/set the function for the updateFunction option.