Class: ScrollList<P>

A scrollable list.

Type parameters

Name	Type
P	extends ScrollListProps = ScrollListProps

Hierarchy

• DisplayComponent<P>

  ↳ ScrollList

  ↳↳ TouchList

Constructors

constructor

• new ScrollList<P>(props): ScrollList<P>

Creates an instance of a DisplayComponent.

Type parameters

Name	Type
P	extends ScrollListProps = ScrollListProps

Parameters

Name	Type	Description
props	P	The propertis of the component.

Returns

ScrollList<P>

Inherited from

DisplayComponent<P>.constructor

Defined in

src/sdk/components/FSComponent.ts:73

Properties

_animationTargetScrollPos

• Protected Readonly _animationTargetScrollPos: Subject<undefined | number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:185

---

_firstVisibleIndex

• Protected Readonly _firstVisibleIndex: MappedSubject<[number, number], number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:202

---

_itemsPerPage

• Protected Readonly _itemsPerPage: undefined | Subject<number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:75

---

_lengthPx

• Protected Readonly _lengthPx: Subscribable<number> | MappedSubscribable<number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:103

---

_listItemLengthWithMarginPx

• Protected Readonly _listItemLengthWithMarginPx: MappedSubject<[number, number], number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:84

---

_maxScrollPos

• Protected Readonly _maxScrollPos: MappedSubject<[number, number], number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:129

---

_renderWindow

• Protected Readonly _renderWindow: Vec2Subject

Defined in

src/garminsdk/components/list/ScrollList.tsx:234

---

_scrollPos

• Protected Readonly _scrollPos: Subject<number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:142

---

_totalLengthPx

• Protected Readonly _totalLengthPx: MappedSubject<[number, number, number], number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:92

---

animateFunc

• Protected Readonly animateFunc: () => void

Type declaration

▸ (): void

Called once per animation frame while we are animating.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:241

---

animationTargetScrollPos

• Readonly animationTargetScrollPos: Subscribable<undefined | number>

The scroll position targeted by this list's current scrolling animation, in pixels, or undefined if scrolling is not currently animated or the animation has no defined target scroll position.

Defined in

src/garminsdk/components/list/ScrollList.tsx:190

---

childrenNode

• Protected Optional childrenNode: VNode

Defined in

src/garminsdk/components/list/ScrollList.tsx:58

---

context

• Optional context: [] = undefined

The context on this component, if any.

Inherited from

DisplayComponent.context

Defined in

src/sdk/components/FSComponent.ts:64

---

contextType

• Optional Readonly contextType: readonly [] = undefined

The type of context for this component, if any.

Inherited from

DisplayComponent.contextType

Defined in

src/sdk/components/FSComponent.ts:67

---

cssClassSub

• Protected Optional cssClassSub: Subscription | Subscription[]

Defined in

src/garminsdk/components/list/ScrollList.tsx:257

---

deltaTimeSeconds

• Protected deltaTimeSeconds: number = 0

Defined in

src/garminsdk/components/list/ScrollList.tsx:246

---

firstVisibleIndex

• Readonly firstVisibleIndex: Subscribable<number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:210

---

goToAnimationTargetPos

• Protected goToAnimationTargetPos: boolean = false

Defined in

src/garminsdk/components/list/ScrollList.tsx:252

---

interval

• Protected Optional interval: number

Defined in

src/garminsdk/components/list/ScrollList.tsx:253

---

isAnimating

• Protected isAnimating: boolean = false

Defined in

src/garminsdk/components/list/ScrollList.tsx:243

---

itemCount

• Protected Readonly itemCount: Subscribable<number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:70

---

itemsContainerRef

• Protected Readonly itemsContainerRef: NodeReference<HTMLDivElement>

Defined in

src/garminsdk/components/list/ScrollList.tsx:62

---

itemsPerPage

• Readonly itemsPerPage: undefined | Subscribable<number>

The number of visible list items per page displayed by this list, or undefined if the number of items per page is not prescribed.

Defined in

src/garminsdk/components/list/ScrollList.tsx:80

---

itemsPerPageProp

• Protected Readonly itemsPerPageProp: undefined | Subscribable<number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:66

---

lastTimeSeconds

• Protected lastTimeSeconds: number = 0

Defined in

src/garminsdk/components/list/ScrollList.tsx:245

---

lengthPx

• Readonly lengthPx: Subscribable<number>

The visible length of this list, in pixels, along its scroll axis.

Defined in

src/garminsdk/components/list/ScrollList.tsx:116

---

listItemLengthPx

• Protected Readonly listItemLengthPx: Subject<number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:68

---

listItemLengthPxProp

• Protected Readonly listItemLengthPxProp: Subscribable<number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:64

---

listItemLengthWithMarginPx

• Readonly listItemLengthWithMarginPx: Subscribable<number>

The length, in pixels, of one item in this list plus its margin along this list's scroll axis.

Defined in

src/garminsdk/components/list/ScrollList.tsx:90

---

listItemParamSubs

• Protected Readonly listItemParamSubs: Subscription[] = []

Defined in

src/garminsdk/components/list/ScrollList.tsx:255

---

listItemSpacingPx

• Protected Readonly listItemSpacingPx: Subject<number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:69

---

listItemSpacingPxProp

• Protected Readonly listItemSpacingPxProp: Subscribable<number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:65

---

maxOverscrollPx

• Protected Readonly maxOverscrollPx: Subscribable<number>

How many pixels we will allow overscrolling before stopping.

Defined in

src/garminsdk/components/list/ScrollList.tsx:140

---

maxRenderedItemCount

• Protected Readonly maxRenderedItemCount: undefined | MappedSubject<[number, number], number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:212

---

maxScrollPos

• Readonly maxScrollPos: Subscribable<number>

This list's maximum allowed scroll position, in pixels. Does not include overscroll.

Defined in

src/garminsdk/components/list/ScrollList.tsx:137

---

maxTimeInOverscrollSeconds

• Protected maxTimeInOverscrollSeconds: number = 0.5

How long to wait while overscrolled before snapping back.

Defined in

src/garminsdk/components/list/ScrollList.tsx:249

---

pageLength

• Protected Readonly pageLength: MappedSubscribable<number>

The length of one page, in pixels, along this list's scroll axis.

Defined in

src/garminsdk/components/list/ScrollList.tsx:119

---

props

• props: P & ComponentProps

The properties of the component.

Inherited from

DisplayComponent.props

Defined in

src/sdk/components/FSComponent.ts:61

---

renderWindow

• Readonly renderWindow: Subscribable<Readonly<Omit<Float64Array, "set" | "sort" | "copyWithin">>>

The window of rendered list items, as [startIndex, endIndex], where startIndex is the index of the first rendered item, inclusive, and endIndex is the index of the last rendered item, exclusive.

Defined in

src/garminsdk/components/list/ScrollList.tsx:239

---

renderWindowStartIndex

• Protected Readonly renderWindowStartIndex: Subject<number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:220

---

renderWindowStartPos

• Protected Readonly renderWindowStartPos: MappedSubject<[number, number], number>

Defined in

src/garminsdk/components/list/ScrollList.tsx:221

---

rootRef

• Protected Readonly rootRef: NodeReference<HTMLDivElement>

Defined in

src/garminsdk/components/list/ScrollList.tsx:60

---

scrollAxis

• Readonly scrollAxis: "x" | "y"

The axis along which this list scrolls.

Defined in

src/garminsdk/components/list/ScrollList.tsx:73

---

scrollBarLengthFraction

• Readonly scrollBarLengthFraction: Subscribable<number>

The fraction of this list's visible length compared to the total length of all items in this list plus their margins along this list's scroll axis.

Defined in

src/garminsdk/components/list/ScrollList.tsx:177

---

scrollPos

• Readonly scrollPos: Subscribable<number>

This list's current scroll position, in pixels. The scroll position is zero when the list is scrolled to the beginning (without overscroll) and increases as the list is scrolled toward the end.

Defined in

src/garminsdk/components/list/ScrollList.tsx:147

---

scrollPosFraction

• Readonly scrollPosFraction: Subscribable<number>

This list's current scroll position, normalized such that 0 represents when the list is scrolled to the beginning (without overscroll) and 1 represents when the list is scrolled to the end (without overscroll).

Defined in

src/garminsdk/components/list/ScrollList.tsx:153

---

snapToItem

• Protected Readonly snapToItem: boolean

Defined in

src/garminsdk/components/list/ScrollList.tsx:82

---

snappingTransitionSpeed

• Protected snappingTransitionSpeed: number = 200

Once at or below this velocity, we pick that target Y to snap to.

Defined in

src/garminsdk/components/list/ScrollList.tsx:251

---

targetScrollPos

• Readonly targetScrollPos: MappedSubject<[undefined | number, number], number>

This list's current target scroll position, in pixels. The target scroll position is equal to the current animation target if it is defined; otherwise it is equal to the current scroll position.

Defined in

src/garminsdk/components/list/ScrollList.tsx:196

---

timeInOverscrollSeconds

• Protected timeInOverscrollSeconds: number = 0

Defined in

src/garminsdk/components/list/ScrollList.tsx:247

---

totalLengthPx

• Readonly totalLengthPx: Subscribable<number>

The total length, in pixels, of all items in this list plus their margins along this list's scroll axis.

Defined in

src/garminsdk/components/list/ScrollList.tsx:101

---

translatableRef

• Protected Readonly translatableRef: NodeReference<HTMLDivElement>

Defined in

src/garminsdk/components/list/ScrollList.tsx:61

---

trueScrollPos

• Protected Readonly trueScrollPos: MappedSubject<[number, number], number>

This list's current scroll position adjusted for the render window.

Defined in

src/garminsdk/components/list/ScrollList.tsx:228

---

velocity

• Protected velocity: number = 0

Defined in

src/garminsdk/components/list/ScrollList.tsx:244

---

RESERVED_CLASSES

▪ Static Protected Readonly RESERVED_CLASSES: string[]

Defined in

src/garminsdk/components/list/ScrollList.tsx:56

Methods

animate

▸ animate(): void

Called once per animation frame while we are animating.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:488

---

animateSnapback

▸ animateSnapback(): void

Animates scrolling back when overscrolled.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:557

---

animateSnapping

▸ animateSnapping(deltaTimeSeconds): void

If we have a target Y position to stop scrolling at, animate towards a smooth stop right at that point.

Parameters

Name	Type	Description
deltaTimeSeconds	number	Seconds since last animation frame.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:588

---

animateVelocity

▸ animateVelocity(deltaTimeSeconds): void

Applies the velocity to the scroll position, which gives it the "flick" effect. Also slows the velocity down overtime.

Parameters

Name	Type	Description
deltaTimeSeconds	number	Seconds since last animation frame.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:532

---

changeRenderWindow

▸ changeRenderWindow(scrollPos, renderCount, itemLength, windowLength): void

Changes this list's item render window.

Parameters

Name	Type	Description
scrollPos	number	The scroll position on which to center the new render window, in pixels.
renderCount	number	The number of items to render in the new window.
itemLength	number	The length of each item to render, including margin, in pixels.
windowLength	number	The length of the render window, in pixels.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:739

---

destroy

▸ destroy(): void

Returns

void

Inherit Doc

Overrides

DisplayComponent.destroy

Defined in

src/garminsdk/components/list/ScrollList.tsx:872

---

ensureScrollIsInBounds

▸ ensureScrollIsInBounds(): void

Checks if the list is scrolled past the maximum limit, and if so, snaps the list back to the limit.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:766

---

executeScrollTo

▸ executeScrollTo(pos, animate): void

Executes a scroll to a specifed position.

Parameters

Name	Type	Description
pos	number	The position to which to scroll.
animate	boolean	Whether to animate the scroll.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:449

---

getContainerRef

▸ getContainerRef(): HTMLDivElement

Returns a reference to the element where the list items should be added.

Returns

HTMLDivElement

A reference to the element where the list items should be added.

Defined in

src/garminsdk/components/list/ScrollList.tsx:306

---

getContext

▸ getContext(context): never

Gets a context data subscription from the context collection.

Parameters

Name	Type	Description
context	never	The context to get the subscription for.

Returns

never

The requested context.

Throws

An error if no data for the specified context type could be found.

Inherited from

DisplayComponent.getContext

Defined in

src/sdk/components/FSComponent.ts:106

---

getDampening

▸ getDampening(direction): number

Returns a number used to dampen the mouse movement when overscrolled.

Parameters

Name	Type	Description
direction	number	What direction os the mouse moving in.

Returns

number

a number used to dampen the mouse movement when overscrolled.

Defined in

src/garminsdk/components/list/ScrollList.tsx:782

---

getOverscrollPx

▸ getOverscrollPx(): number

Gets the distance by which this list is currently overscrolled, in pixels along the scroll axis.

Returns

number

The distance by which this list is currently overscrolled, in pixels along the scroll axis.

Defined in

src/garminsdk/components/list/ScrollList.tsx:814

---

getReservedCssClasses

▸ getReservedCssClasses(): readonly string[]

Gets an array of this list's reserved CSS classes.

Returns

readonly string[]

An array of this list's reserved CSS classes.

Defined in

src/garminsdk/components/list/ScrollList.tsx:867

---

isOverscrolled

▸ isOverscrolled(): boolean

Returns whether this list is currently overscrolled.

Returns

boolean

Whether this list is currently overscrolled.

Defined in

src/garminsdk/components/list/ScrollList.tsx:828

---

onAfterRender

▸ onAfterRender(): void

Returns

void

Inherit Doc

Overrides

DisplayComponent.onAfterRender

Defined in

src/garminsdk/components/list/ScrollList.tsx:260

---

onBeforeRender

▸ onBeforeRender(): void

A callback that is called before the component is rendered.

Returns

void

Inherited from

DisplayComponent.onBeforeRender

Defined in

src/sdk/components/FSComponent.ts:80

---

onListItemParamChanged

▸ onListItemParamChanged(pipeTo, value): void

Responds to when one of this list's item parameters changes when the list supports snapping to items.

Parameters

Name	Type	Description
pipeTo	MutableSubscribable<number, number>	The mutable subscribable to which to pipe the new parameter value.
value	number	The new parameter value.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:694

---

pageBack

▸ pageBack(): void

Scrolls backward by one full page length.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:313

---

pageForward

▸ pageForward(): void

Scrolls forward by one full page length.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:328

---

pickNearestSnapToPos

▸ pickNearestSnapToPos(pos): number

Picks the scroll position, in pixels, of the snap-to target that is nearest to a given scroll position.

Parameters

Name	Type	Description
pos	number	The scroll position, in pixels, for which to find the nearest snap-to target.

Returns

number

The scroll position, in pixels, of the snap-to target that is nearest to the specified scroll position.

Defined in

src/garminsdk/components/list/ScrollList.tsx:685

---

render

▸ render(): VNode

Returns

VNode

Inherit Doc

Overrides

DisplayComponent.render

Defined in

src/garminsdk/components/list/ScrollList.tsx:833

---

scrollToIndex

▸ scrollToIndex(index, position, animate): void

Scrolls until the item at a specified index is in view.

Parameters

Name	Type	Description
index	number	The index of the item to which to scroll.
position	number	The position to place the target item at the end of the scroll. Position 0 is the top/left-most visible slot, position 1 is the next slot, and so on. Values greater than or equal to the number of visible items per page will be clamped. Negative values will be interpreted as counting backwards from the bottom/right-most visible slot starting with -1. Ignored if this list does not support snapping to list items.
animate	boolean	Whether to animate the scroll.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:349

---

scrollToIndexWithMargin

▸ scrollToIndexWithMargin(index, margin, animate): void

Scrolls the minimum possible distance until the item at a specified index is in view with a given margin from the edges of the visible list.

Parameters

Name	Type	Description
index	number	The index of the item to which to scroll.
margin	number	The margin from the edges of the visible list to respect when scrolling to the target item. In other words, the scrolling operation will attempt to place the target item at least as far from the edges of the visible list as the specified margin. If this list supports snapping to items, then the margin should be expressed as an item count. If this list does not support snapping to items, then the margin should be expressed as pixels. The margin will be clamped between zero and the largest possible value such that an item can be placed within the visible list while respecting the margin value on both sides.
animate	boolean	Whether to animate the scroll.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:405

---

startAnimating

▸ startAnimating(): void

Reset the animation vars and start the animation, if not already started.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:466

---

stopAnimating

▸ stopAnimating(): void

Stop the animation.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:478

---

updateRenderWindow

▸ updateRenderWindow(): void

Updates this list's item render window.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:709

---

updateTransformX

▸ updateTransformX(scrollPos): void

Updates this list's item container's x-transform based on the current true scroll position.

Parameters

Name	Type	Description
scrollPos	number	The current true scroll position, in pixels.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:751

---

updateTransformY

▸ updateTransformY(scrollPos): void

Updates this list's item container's y-transform based on the current true scroll position.

Parameters

Name	Type	Description
scrollPos	number	The current true scroll position, in pixels.

Returns

void

Defined in

src/garminsdk/components/list/ScrollList.tsx:759