15954078560 e419e64505 重置 | 2 years ago | |
---|---|---|
.. | ||
AutoScroll.js | 2 years ago | |
README.md | 2 years ago | |
index.js | 2 years ago |
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,outputoverflow: hidden
: https://jsbin.com/xecihez/edit?html,js,outputThis plugin is a default plugin, and is included in the default UMD and ESM builds of Sortable
import { Sortable, AutoScroll } from 'sortablejs';
Sortable.mount(new AutoScroll());
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
optionEnables 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,outputoverflow: hidden
: https://jsbin.com/xecihez/edit?html,js,outputscrollFn
optionDefines 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
optionDefines how near the mouse must be to an edge to start scrolling.
scrollSpeed
optionThe speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity
distance.
bubbleScroll
optionIf 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