InfinityScroller

This class virtualizes a DOM Scroller to allow scroll ranges that exceed browser limits and also allow negative scroll positions. These are managed by instances of InfinityAxis named x and y.

Configs

animate: smooth | null= smoothAlso a property

Set to null to disable smooth scroll animation.

safetyMargin: Number= 0.01Also a property

The proportional amount of the browser's true scrollLimit to not use in order to reduce likelihood of browser anomalies. By default, 99% of the limit is used (this value being 1%, by default).

snap: x | y | nullAlso a property

If not null, this config determines which axis to use for scroll snapping.

snapThreshold: NumberAlso a property

The minimum number of pixels or the minimum proportion of the item that must be scrolled to initiate a snap to reveal the whole item. A completed scroll of less than this amount is reversed. If this value is less-than 1, then this is the decimal fraction of the item's size. By default, this value is 0.1, which is 10% of the item's width. Otherwise, this value is an absolute number of pixels.

x: InfinityAxisAlso a property

The InfinityAxis instance managing the x-axis.

y: InfinityAxisAlso a property

The InfinityAxis instance managing the y-axis.

Properties

animate: smooth | null= smoothAlso a config

Set to null to disable smooth scroll animation.

safetyMargin: Number= 0.01Also a config

The proportional amount of the browser's true scrollLimit to not use in order to reduce likelihood of browser anomalies. By default, 99% of the limit is used (this value being 1%, by default).

snap: x | y | nullAlso a config

If not null, this config determines which axis to use for scroll snapping.

snapThreshold: NumberAlso a config

x: InfinityAxisAlso a config

The InfinityAxis instance managing the x-axis.

y: InfinityAxisAlso a config

The InfinityAxis instance managing the y-axis.

Functions

scrollTo

Scrolls to the specified x and y positions, or by the specified dx and dy. Only one of these values is required. It is invalid to pass x and dx, or y and dy at the same time, however, it is valid to pass x and dy, or y and dx.

This method returns a Promise that resolves to a boolean value. This value indicates that the desired scroll adjustment was made. It is false if the scroll ends at a different position. This can happen if the user interferes with the scroll, or another call to this method is made before the first call completes.

Parameter	Type	Description
`options`	Object
`options.animate`	Boolean	Specify `false` to scroll without animation.
`options.dx`	Number	The amount by which the `x` scroll position should be adjusted.
`options.dy`	Number	The amount by which the `y` scroll position should be adjusted.
`options.x`	Number	The new value for the `x` scroll position.
`options.y`	Number	The new value for the `y` scroll position.

Returns: Boolean

Events

scroll

Fired when scrolling happens on this InfinityScroller's element.

// Adding a listener using the "on" method
infinityScroller.on('scroll', ({ relatedEvent, widget, source }) => {

});

Parameter	Type	Description
`relatedEvent`	Event	The DOM event.
`widget`	Container	The owning client instance.
`source`	InfinityScroller	This InfinityScroller

scrollEnd

Fired when scrolling finished on this InfinityScroller's element.

// Adding a listener using the "on" method
infinityScroller.on('scrollEnd', ({ relatedEvent, widget, source }) => {

});

Parameter	Type	Description
`relatedEvent`	Event	The last DOM event to fire.
`widget`	Container	The owning client instance.
`source`	InfinityScroller	This InfinityScroller

Event handlers

onScroll

Called when scrolling happens on this InfinityScroller's element.

new InfinityScroller({
    onScroll({ relatedEvent, widget, source }) {

    }
});

Parameter	Type	Description
`relatedEvent`	Event	The DOM event.
`widget`	Container	The owning client instance.
`source`	InfinityScroller	This InfinityScroller

onScrollEnd

Called when scrolling finished on this InfinityScroller's element.

new InfinityScroller({
    onScrollEnd({ relatedEvent, widget, source }) {

    }
});

Parameter	Type	Description
`relatedEvent`	Event	The last DOM event to fire.
`widget`	Container	The owning client instance.
`source`	InfinityScroller	This InfinityScroller