Skip to content

Files

Latest commit

Sep 22, 2023
b3e34bc · Sep 22, 2023

History

History

Scrollable

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Mar 2, 2018
Sep 22, 2023
Mar 2, 2018

Scrollable

The auto scroll plugin listens to Draggables drag:start, drag:move and drag:stop events to determine when to scroll the document it's on. This plugin is used by draggable by default, but could potentially be replaced with a custom plugin.

API

new Scrollable(draggable: Draggable): Scrollable To create an auto scroll plugin instance.

Options

speed {Number} Determines the scroll speed. Default: 10

sensitivity {Number} Determines the sensitivity of scrolling. Default: 30

scrollableElements {HTMLElement[]} Allows users to specify their own scrollable elements, rather than letting Draggable compute these automatically. Default: []

Examples

import {Draggable} from '@shopify/draggable';

const customScrollableElements = document.querySelectorAll('.my-custom-scroll-elements')

const draggable = new Draggable(document.querySelectorAll('ul'), {
  draggable: 'li',
  scrollable: {
    speed: 6,
    sensitivity: 12,
    scrollableElements: [
      ...customScrollableElements,
    ],
  },
});

Removing the plugin

import {Draggable} from '@shopify/draggable';

const draggable = new Draggable(document.querySelectorAll('ul'), {
  draggable: 'li',
});

// Removes Scrollable plugin
draggable.removePlugin(Draggable.Plugin.Scrollable);

// Adds custom scroll plugin
draggable.addPlugin(CustomScrollPlugin);