README.md 2.1 KB

AutoScroll

This plugin allows for the page to automatically scroll during dragging near a scrollable element's edge on mobile devices and IE9 (or whenever fallback is enabled), and also enhances most browser's native drag-and-drop autoscrolling. Demo:

This plugin is a default plugin, and is included in the default UMD and ESM builds of Sortable


Mounting

import { Sortable, AutoScroll } from 'sortablejs';

Sortable.mount(new AutoScroll());

Options

new Sortable(el, {
	scroll: true, // Enable the plugin. Can be HTMLElement.
	scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
	scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
	scrollSpeed: 10, // px, speed of the scrolling
	bubbleScroll: true // apply autoscroll to all parent elements, allowing for easier movement
});

scroll option

Enables the plugin. Defaults to true. May also be set to an HTMLElement which will be where autoscrolling is rooted.

Demo:


scrollFn option

Defines function that will be used for autoscrolling. el.scrollTop/el.scrollLeft is used by default. Useful when you have custom scrollbar with dedicated scroll function. This function should return 'continue' if it wishes to allow Sortable's native autoscrolling.


scrollSensitivity option

Defines how near the mouse must be to an edge to start scrolling.


scrollSpeed option

The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance.


bubbleScroll option

If set to true, the normal autoscroll function will also be applied to all parent elements of the element the user is dragging over.

Demo: https://jsbin.com/kesewor/edit?html,js,output