moonstone/ Scroller
Exports the moonstone/Scroller.Scroller and moonstone/Scroller.ScrollerBase components. The default export is moonstone/Scroller.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
A callback function that receives a reference to the
scrollTofeature. Once received, thescrollTomethod can be called as an imperative interface.The
scrollTofunction 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. (
0or positive integer) This option is available for onlyVirtualListkind.{node} - Node to scroll into view
{animate} - When
true, scroll occurs with animation. Whenfalse, no animation occurs.{indexToFocus} - Deprecated: Use
focusinstead.{focus} - When
true, attempts to focus item after scroll. Only valid when scrolling byindexornode.Note: Only specify one of:
position,align,indexornode
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
Direction of the scroller; valid values are
'both','horizontal', and'vertical'.Default: 'both'- focusableScrollbar
When
true, allows 5-way navigation to the scrollbar controls. By default, 5-way will not move focus to the scrollbar controls.- horizontal ✘
Specifies how to horizontally scroll. Acceptable values are
'auto','default','hidden', and'scroll'.replaced by
directionDefault: 'auto'- horizontalScrollbar
Specifies how to show horizontal scrollbar. Acceptable values are
'auto','visible', and'hidden'.Default: 'auto'- onScroll
Called when scrolling Passes
scrollLeft,scrollTop, andmoreInfoIt is not recommended to set this prop since it can cause performance degradation. UseonScrollStartoronScrollStopinstead.- onScrollStart
Called when scroll starts Passes
scrollLeft,scrollTop, andmoreInfo- onScrollStop
Called when scroll stops Passes
scrollLeft,scrollTop, andmoreInfo- vertical ✘
Specifies how to vertically scroll. Acceptable values are
'auto','auto','hidden', and'scroll'.replaced by
directionDefault: 'auto'- verticalScrollbar
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
Direction of the scroller; valid values are
'both','horizontal', and'vertical'.Default: 'both'- horizontal ✘
Specifies how to horizontally scroll. Acceptable values are
'auto','default','hidden', and'scroll'.replaced by
directionDefault: 'auto'- vertical ✘
Specifies how to vertically scroll. Acceptable values are
'auto','auto','hidden', and'scroll'.replaced by
directionDefault: 'auto'