Scroller

Encapsulates scroll functionality for a Widget. All requests for scrolling and scrolling information must go through a Widget's scrollable property.

Configs

Common

listenersEvents

Other

contentElement: HTMLElement | String

The element, or a selector which identifies a descendant element whose size will affect the scroll range.

element: HTMLElement

The element which is to scroll. Defaults to the overflowElement of the configured widget

How to handle overflowing in the X axis. May be:

'auto'
'visible'
'hidden'
'scroll'
'clip'
'hidden-scroll' Meaning scrollable from the UI but with no scrollbar, for example a grid header. Only on platforms which support this feature.
true - meaning 'auto'
false - meaning 'hidden'

How to handle overflowing in the Y axis. May be:

'auto'
'visible'
'hidden'
'scroll'
'clip'
'hidden-scroll' Meaning scrollable from the UI but with no scrollbar. Only on platforms which support this feature.
true - meaning 'auto'
false - meaning 'hidden'

propagateSync: Boolean= falseAlso a property

Configure as true to immediately sync partner scrollers when being synced by a controlling partner instead of waiting for our own scroll event to pass the scroll on to partners.

scrollingCls: String= 'b-scrolling'

The CSS class to add to the element when it is being scrolled.

translate: Boolean

If configured as true, the element is not scrolled but is translated using CSS translate when controlled by this class's API. Scroll events are fired when the element is translated.

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

Properties

Class hierarchy

isScroller: Boolean= truereadonly

Identifies an object as an instance of Scroller class, or subclass thereof.

isScroller: Boolean= truereadonlystatic

Identifies an object as an instance of Scroller class, or subclass thereof.

isDelayableDelayable

isEventsEvents

Other

clientHeight: Numberreadonly

The client height of the widget.

clientWidth: Numberreadonly

The client width of the widget.

id: Stringreadonly

The unique ID of this Scroller

lastScrollLeft: Numberreadonly

The furthest possible scrollLeft position of the widget. Will be negative if in writing direction is RTL.

maxX: Numberreadonly

The maximum X scrollable position of the widget.

maxY: Numberreadonly

The maximum Y scrollable position of the widget.

overflowX: Boolean | StringAlso a config

The overflow-x setting for the widget. true means 'auto'.

overflowY: Boolean | StringAlso a config

The overflow-y setting for the widget. true means 'auto'.

propagateSync: Boolean= falseAlso a config

Configure as true to immediately sync partner scrollers when being synced by a controlling partner instead of waiting for our own scroll event to pass the scroll on to partners.

scrollHeight: Number

The vertical scroll range of the widget. May be set to larger than the actual data height to enable virtual scrolling. This is how the grid extends its scroll range while only rendering a small subset of the dataset.

scrollLeft: Number

The natural DOM horizontal scroll position of the widget.

Note that this proceeds from 0 into negative space in RTL mode.

scrollWidth: Numberreadonly

The horizontal scroll range of the widget.

viewport: Rectangle

A Rectangle describing the bounds of the scrolling viewport.

x: Number

The horizontal scroll position of the widget.

Note that this is always positive. Horizontal scrolling using the X property always proceeds in the positive direction.

y: Number

The vertical scroll position of the widget.

catchEventHandlerExceptionsEvents

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

Functions

Other

addPartner

Partners this Scroller with the passed scroller in order to sync the scrolling position in the passed axes

Parameter	Type	Description
`otherScroller`	Scroller
`axes`	String \| Object	`'x'` or `'y'` or `{x: true/false, y: true/false}` axes to sync
`axes.x`	Boolean	Sync horizontal scroll
`axes.y`	Boolean	Sync vertical scroll

removePartner

Breaks the link between this Scroller and the passed Scroller set up by the addPartner method.

Parameter	Type	Description
`otherScroller`	Scroller	The Scroller to unlink from.

scrollBy

Scrolls by the passed deltas according to the passed options.

Parameter	Type	Description
`xDelta`	Number	How far to scroll in the X axis.
`yDelta`	Number	How far to scroll in the Y axis.
`options`	Object \| Boolean	How to scroll. May be passed as `true` to animate.
`options.silent`	Boolean	Set to `true` to suspend `scroll` events during scrolling.
`options.animate`	AnimateScrollOptions \| Boolean \| Number	Set to `true` to animate the scroll by 300ms, or the number of milliseconds to animate over, or an animation config object.

Returns: Promise -

A promise which is resolved when the scrolling has finished.

scrollIntoView

Scrolls the passed element or Rectangle into view according to the passed options.

Parameter	Type	Description
`element`	HTMLElement \| Rectangle	The element or a Rectangle in document space to scroll into view.
`options`	BryntumScrollOptions	How to scroll.

Returns: Promise -

A promise which is resolved when the element has been scrolled into view.

scrollIntoViewstatic

Scrolls the passed element into view according to the passed options.

Parameter	Type	Description
`element`	HTMLElement	The element in document space to scroll into view.
`options`	BryntumScrollOptions	How to scroll.

Returns: Promise -

A promise which is resolved when the element has been scrolled into view.

scrollTo

Scrolls to the passed position according to the passed options.

Parameter	Type	Description
`toX`	Number	Where to scroll to in the X axis.
`toY`	Number	Where to scroll to in the Y axis.
`options`	Object \| Boolean	How to scroll. May be passed as `true` to animate.
`options.animate`	AnimateScrollOptions \| Boolean \| Number	Set to `true` to animate the scroll by 300ms, or the number of milliseconds to animate over, or an animation config object.

Returns: Promise -

A promise which is resolved when the scrolling has finished.

addListenerEvents

createOnFrameDelayable

hasListenerEvents

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

resolveCallbackBase

Events

scroll

Fired when scrolling happens on this Scroller's element. The event object is a native scroll event with the described extra properties injected.

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

});

Parameter	Type	Description
`widget`	Widget	The owning Widget which has been scrolled.
`source`	Scroller	This Scroller

scrollEnd

Fired when scrolling finished on this Scroller's element. The event object is the last native scroll event fires by the element with the described extra properties injected.

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

});

Parameter	Type	Description
`widget`	Widget	The owning Widget which has been scrolled.
`source`	Scroller	This Scroller

beforeDestroyEvents

catchAllEvents

destroyEvents

Event handlers

onScroll

Called when scrolling happens on this Scroller's element. The event object is a native scroll event with the described extra properties injected.

new Scroller({
    onScroll({ widget, source }) {

    }
});

Parameter	Type	Description
`widget`	Widget	The owning Widget which has been scrolled.
`source`	Scroller	This Scroller

onScrollEnd

Called when scrolling finished on this Scroller's element. The event object is the last native scroll event called by the element with the described extra properties injected.

new Scroller({
    onScrollEnd({ widget, source }) {

    }
});

Parameter	Type	Description
`widget`	Widget	The owning Widget which has been scrolled.
`source`	Scroller	This Scroller

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

Typedefs

AnimateScrollOptions

Animation options for scrolling.

Parameter	Type	Description
`duration`	Number	The number of milliseconds to animate over.
`easing`	String	The name of an easing function.

BryntumScrollOptions

Options accepted by some scroll functions. Note that not all options are valid for all functions.

Parameter	Type	Description
`block`	start \| end \| center \| nearest	How far to scroll the element.
`edgeOffset`	Number	edgeOffset A margin around the element or rectangle to bring into view.
`animate`	AnimateScrollOptions \| Boolean \| Number	Set to `true` to animate the scroll by 300ms, or the number of milliseconds to animate over, or an animation config object.
`highlight`	Boolean \| function \| String	Set to `true` to highlight the element when it is in view. May be a function, or the name of a method which is called passing the element, to provide customized highlighting.
`focus`	Boolean	Set to `true` to focus the element when it is in view.
`x`	Boolean	Pass as `false` to disable scrolling in the `X` axis.
`y`	Boolean	Pass as `false` to disable scrolling in the `Y` axis.
`maxWidth`	Number	How much of the target's width to bring into view if the target is wider.
`maxHeight`	Number	How much of the target's height to bring into view if the target is taller.
`viewport`	Rectangle	An optional definition of the scrollable viewport if it has to differ from the actual client area of this Scroller's element.

BryntumListenerConfigEvents

DelayableConfigDelayable

Scroller

Configs

Common

Other

Misc

Properties

Class hierarchy

Other

Lifecycle

Misc

Functions

Other

Configuration

Events

Lifecycle

Misc

Events

Event handlers

Typedefs