moonstone/Scroller

import Scroller from '@enact/moonstone/Scroller';

Members

ScrollerComponent

moonstone/Scroller.Scroller is a Scroller with Moonstone styling, SpotlightContainerDecorator and Scrollable applied.

Usage:

<Scroller>Scroll me.</Scroller>
import Scroller from '@enact/moonstone/Scroller';
Properties
cbScrollTo
Function

A callback function that receives a reference to the scrollTo feature. Once received, the scrollTo method can be called as an imperative interface.

The scrollTo function accepts the following paramaters:

  • {position: {x, y}} - Pixel value for x and/or y position

  • {align} - Where the scroll area should be aligned. Values are: 'left', 'right', 'top', 'bottom', 'topleft', 'topright', 'bottomleft', and 'bottomright'.

  • {index} - Index of specific item. (0 or positive integer) This option is available for only VirtualList kind.

  • {node} - Node to scroll into view

  • {animate} - When true, scroll occurs with animation. When false, no animation occurs.

  • {indexToFocus} - Deprecated: Use focus instead.

  • {focus} - When true, attempts to focus item after scroll. Only valid when scrolling by index or node.

    Note: Only specify one of: position, align, index or node

Example:

// If you set cbScrollTo prop like below;
cbScrollTo: (fn) => {this.scrollTo = fn;}
// You can simply call like below;
this.scrollTo({align: 'top'}); // scroll to the top
direction
String

Direction of the scroller; valid values are 'both', 'horizontal', and 'vertical'.

Default: 'both'
focusableScrollbar
Boolean

When true, allows 5-way navigation to the scrollbar controls. By default, 5-way will not move focus to the scrollbar controls.

horizontal
String

Specifies how to horizontally scroll. Acceptable values are 'auto', 'default' , 'hidden', and 'scroll'.

replaced by direction

Default: 'auto'
horizontalScrollbar
String

Specifies how to show horizontal scrollbar. Acceptable values are 'auto', 'visible', and 'hidden'.

Default: 'auto'
onScroll
Function

Called when scrolling Passes scrollLeft, scrollTop, and moreInfo It is not recommended to set this prop since it can cause performance degradation. Use onScrollStart or onScrollStop instead.

onScrollStart
Function

Called when scroll starts Passes scrollLeft, scrollTop, and moreInfo

onScrollStop
Function

Called when scroll stops Passes scrollLeft, scrollTop, and moreInfo

vertical
String

Specifies how to vertically scroll. Acceptable values are 'auto', 'auto' , 'hidden', and 'scroll'.

replaced by direction

Default: 'auto'
verticalScrollbar
String

Specifies how to show vertical scrollbar. Acceptable values are 'auto', 'visible', and 'hidden'.

Default: 'auto'

ScrollerBaseComponent

moonstone/Scroller.ScrollerBase is a base component for Scroller. In most circumstances, you will want to use the SpotlightContainerDecorator and Scrollable version: moonstone/Scroller.Scroller

import {ScrollerBase} from '@enact/moonstone/Scroller';
Properties
direction
String

Direction of the scroller; valid values are 'both', 'horizontal', and 'vertical'.

Default: 'both'
horizontal
String

Specifies how to horizontally scroll. Acceptable values are 'auto', 'default' , 'hidden', and 'scroll'.

replaced by direction

Default: 'auto'
vertical
String

Specifies how to vertically scroll. Acceptable values are 'auto', 'auto' , 'hidden', and 'scroll'.

replaced by direction

Default: 'auto'
ArrayBooleanFunctionModuleNumberObjectString