This script allows scrolling of div content by dragging or swiping the mouse cursor, similar to the functionality available on smartphone and other handheld devices. Facilitates vertical and horizontal scrolling where possible.
Also supports bi-axial scrolling of divs using the scrollwheel, even those with hidden overflow, which is not normally possible.
Handheld Device

D r a g D i v S c r o l l

To demonstrate the script and read about all features, scroll 'up' by dragging the mouse cursor.

Later try the scrollwheel if available.

Scroll a div vertically or horizontally by swiping the mouse cursor

The one-script solution to:

  • Emulating the swipe-scrolling functionality of popular handheld devices.
  • Scrolling div content (even hidden) with the scrollwheel, vertically and horizontally.
    Toggle the default scrollwheel axis by clicking the mouse button.
The full-page equivalent script is

 D R A G S C R O L L 

Supports NESTED SCROLLING

Active scrollable elements can be nested within others and scrolled independently
of their containers, with no unwanted interaction.
Each scrollable element being configured separately.

Single or dual axis scrolling. When both axes are scrollable, can be configured only to scroll in one.
Scroll 'inertia' ( slowing down after releasing the mouse button ) can be inhibited.
To facilitate conventional actions such as text-selection & scrollwheel zooming, both swipe-scrolling and custom scrollwheel action can be configured to be toggled on/off by double-clicking.
The new status is shown momentarily by an on-screen status indicator. The scrollable area below has this feature enabled.

For situations in which the ability to toggle may cause confusion, the feature can be inhibited as it is here.
The double-clicking functionality does not interfere with double clicking of links.

Hides scrollbars so that they can remain available on non-scripting clients.

Can be configured to leave scrollbars visible.

For appropriate content, the scrollwheel axis can be defaulted to horizontal.
Supports multiple divs on the same page, each with their own options applied.
Download Script File with Instructions


Scrollbar Toggle


Test ImageDrag the mouse cursor here in any direction or use the scrollwheel if available.
To toggle the scrollwheel axis, click the mouse button anywhere in this area.
To toggle drag-scrolling on/off, double click anywhere in this area

Script not suitable? Tell us why