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();

Useful configs and functions

Config / Function	Description
element	Element to monitor for edge proximity
zoneWidth	Width in pixels of the scroll trigger zone
scrollSpeed	Scroll speed divisor (higher = slower)
startMonitoring	Begin monitoring pointer position
stopMonitoring	Stop monitoring and scrolling

Configs

Configs are options you supply in a configuration object when creating an instance of this class

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 : Number5

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

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

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

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

Properties

Properties are getters/setters or publicly accessible variables on this class

isScrolling : Boolean

READONLY

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

Functions

Functions are methods available for calling on the class

startMonitoring( config )

: Function

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')
})

stopMonitoring( element )

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

Source path

Core/util/ScrollManager.js

Inheritance tree1

ScrollManager