ScrollView

import { ScrollView } from 'pixi-silk/ui/panel';

Experimental

A clipped area that scrolls its ScrollView.content up and down, the way a native list does. Wheels and trackpads glide to their target, fingers fling with momentum and stretch past the ends, and a slim scrollbar fades in while it moves.

Put children in content and set contentHeight. Lists that only draw their visible rows (the layer tree) read state.scrollY and listen to the scroll event instead. It scrolls vertically only.

Example#

const view = new ScrollView({ width: 240, height: 300 });

view.content.addChild(list);
view.contentHeight = list.height;

Experimental: the API may change in a minor release.

Extends#

• Container

Constructors#

Constructor#

new ScrollView(options?: ScrollViewOptions): ScrollView;

Experimental

Parameters#

Returns#

ScrollView

Overrides#

Container.constructor

Properties#

Accessors#

contentHeight#

Get Signature#

get contentHeight(): number;

Experimental

Height of what scrolls, as set. The view does not measure content itself.

Returns

number

Set Signature#

set contentHeight(h: number): void;

Experimental

Sets ScrollView.contentHeight. The position stays inside the new range.

Parameters

Returns

void

maxScroll#

Get Signature#

get maxScroll(): number;

Experimental

The largest scroll position: contentHeight minus the view height, at least 0.

Returns

number

moving#

Get Signature#

get moving(): boolean;

Experimental

True while the content moves: a glide, a fling or a spring back.

Returns

boolean

scrollY#

Get Signature#

get scrollY(): number;

Experimental

The scroll position as drawn. It can pass 0 or ScrollView.maxScroll while it stretches.

Returns

number

viewHeight#

Get Signature#

get viewHeight(): number;

Experimental

Height of the clipped area.

Returns

number

viewWidth#

Get Signature#

get viewWidth(): number;

Experimental

Width of the clipped area.

Returns

number

Methods#

cancelDrag()#

cancelDrag(): void;

Experimental

Drops a finger drag without a fling, when a child takes the gesture over (a long press that drags a row).

Returns#

void

destroy()#

destroy(options?: DestroyOptions): void;

Experimental

Stops the animation. Destroys children unless options says otherwise.

Parameters#

Returns#

void

Overrides#

Container.destroy

dragBy()#

dragBy(dy: number, bar?: boolean): void;

Experimental

Moves the content as a drag of dy view units from the press does. With bar, the drag is on the scrollbar and moves the other way, faster. Pointer moves call this.

Parameters#

Returns#

void

release()#

release(): void;

Experimental

Lets go of a drag: a fast one keeps gliding and slows down, past an end the content springs back.

Returns#

void

resize()#

resize(width: number, height: number): this;

Experimental

Changes the size of the clipped area. The position stays inside the new range.

Parameters#

Returns#

this

scrollBy()#

scrollBy(dy: number, animate?: boolean): this;

Experimental

Scrolls by dy from where the view is heading.

Parameters#

Returns#

this

scrollIntoView()#

scrollIntoView(
   top: number, 
   bottom: number, 
   animate?: boolean
): this;

Experimental

Scrolls as little as needed to show the content band from top to bottom.

Parameters#

Returns#

this

scrollTo()#

scrollTo(y: number, animate?: boolean): this;

Experimental

Scrolls to y, clamped to the range. Glides unless animate is false.

Parameters#

Returns#

this

tick()#

tick(dt: number): boolean;

Experimental

Advances the motion by dt seconds (only needed with ticker: null). Returns true while moving.

Parameters#

Returns#

boolean