ScrollManager

Monitors the mouse position over an element and scrolls the element if the cursor is close to edges. This is used by various features to scroll the grid section element, for example dragging elements close to edges.

// Instantiate manager for the container element having overflowing content
const manager = new ScrollManager({ element : document.querySelector('.container') });

// Start monitoring. When pointer approaches 50px region within monitored element edge, scrolling begins
manager.startMonitoring();

// Stop monitoring.
manager.stopMonitoring();

Configs

direction: horizontal | vertical | both= both

The direction(s) to scroll ('horizontal', 'vertical' or 'both')

element: HTMLElement

Default element to use for scrolling. Can be overridden in calls to startMonitoring().

scrollSpeed: Number= 5

Scroll speed, higher number is slower. Calculated as "distance from zone edge / scrollSpeed"

startScrollDelay: Number= 500

Number of milliseconds to wait before scroll starts when the mouse is moved close to an edge monitored by this scroll manager

stopScrollWhenPointerOut: Boolean= false

Set to true to stop scrolling when pointing device leaves the scrollable element.

zoneWidth: Number= 50

Width in pixels of the area at the edges of an element where scrolling should be triggered

Properties

isScrolling: Booleanreadonly

Returns true if some of the monitored elements is being scrolled at the moment.

Functions

startMonitoring

Starts monitoring an element. It will be scrolled if mouse is pressed and within zoneWidth pixels from element edge. Supports monitoring multiple elements using scrollables option:

new ScrollManager({ element : '.item' }).startMonitoring({
    scrollables : [
        {
            // Applies config to all elements matching `.item .child-item`
            // selector
            element : '.child-item',
            // Only manage vertical scroll
            direction : 'vertical',
            // Specific callback for this scrollable. Shared callback is
            // ignored.
            callback : () => console.log('Specific callback')
        },
        {
            // Instance can be used
            element : document.querySelector('.item .child2')
            // Direction and callback are not provided, so element will
            // be scrollable in horizontal direction and will use shared
            // callback
        }
    ],
    direction : 'horizontal',
    callback  : () => console.log('Shared callback')
})

Parameter	Type	Description
`config`	Object	Element which might be scrolled or config { element, callback, thisObj }
`config.direction`	horizontal \| vertical \| both	Direction to scroll. Overrides default scroll direction
`config.callback`	function	Callback to execute on every scroll of the target element. `startMonitoring({ callback(monitor) { // Current left and top scroll of the monitored element console.log(monitor.scrollLeft) console.log(monitor.scrollTop) // Scroll position relative to the initial position console.log(monitor.relativeScrollLeft) console.log(monitor.relativeScrollTop) } })`
`config.thisObj`	Object	Scope for the callback.
`config.scrollables`	Object[]	Array of configs if multiple elements should be monitored.
`config.scrollables.0.element`	HTMLElement \| String	Element or selector.
`config.scrollables.0.direction`	horizontal \| vertical \| both	Direction to scroll. Overrides upper config object direction.
`config.scrollables.0.callback`	function	Callback to execute on every scroll of the target element. Overrides upper config object callback.

Returns: function -

Returns function to cleanup instantiated monitors

const detacher = new ScrollManager({ element }).startMonitoring({ ... });
detacher(); // All monitors setup by the previous call are removed

stopMonitoring

Stops monitoring an element. If no particular element is given, stop monitoring everything.

Parameter	Type	Description
`element`	HTMLElement \| HTMLElement[]	Element or array of elements for which monitoring is not desired any more and should stop as soon as possible.