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
scrollTo
feature. Once received, thescrollTo
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 onlyVirtualList
kind.{node} - Node to scroll into view
{animate} - When
true
, scroll occurs with animation. Whenfalse
, no animation occurs.{indexToFocus} - Deprecated: Use
focus
instead.{focus} - When
true
, attempts to focus item after scroll. Only valid when scrolling byindex
ornode
.Note: Only specify one of:
position
,align
,index
ornode
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
direction
Default: 'auto'- horizontalScrollbar
Specifies how to show horizontal scrollbar. Acceptable values are
'auto'
,'visible'
, and'hidden'
.Default: 'auto'- onScroll
Called when scrolling Passes
scrollLeft
,scrollTop
, andmoreInfo
It is not recommended to set this prop since it can cause performance degradation. UseonScrollStart
oronScrollStop
instead.- 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
direction
Default: '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
direction
Default: 'auto'- vertical ✘
Specifies how to vertically scroll. Acceptable values are
'auto'
,'auto'
,'hidden'
, and'scroll'
.replaced by
direction
Default: 'auto'