red/public/assets/libs/Sortable/plugins/AutoScroll

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:

• window: https://jsbin.com/dosilir/edit?js,output
• overflow: hidden: https://jsbin.com/xecihez/edit?html,js,output

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:

• window: https://jsbin.com/dosilir/edit?js,output
• overflow: hidden: https://jsbin.com/xecihez/edit?html,js,output

---

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

---