ui/ Scroller
Unstyled scroller components and behaviors to be customized by a theme or application.
import Scroller from '@enact/ui/Scroller';
Members
ScrollerComponent
An unstyled scroller.
Example:
<Scroller>Scroll me.</Scroller>
import Scroller from '@enact/ui/Scroller';
ScrollerBaseComponent
An unstyled base scroller component.
In most circumstances, you will want to use the Scrollable version.
import {ScrollerBase} from '@enact/ui/Scroller';
Properties
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 parameters:{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'
.{node} - Node to scroll into view
{animate} - When
true
, scroll occurs with animation. Whenfalse
, no animation occurs.{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 of the scroller.
Valid values are:
'both'
,'horizontal'
, and'vertical'
.
Default: 'both'Specifies how to show horizontal scrollbar.
Valid values are:
'auto'
,'visible'
, and'hidden'
.
Default: 'auto'Prevents scroll by wheeling on the scroller.
Default: falseCalled when scrolling.
Passes
scrollLeft
andscrollTop
. It is not recommended to set this prop since it can cause performance degradation. UseonScrollStart
oronScrollStop
instead.Called when scroll starts.
Passes
scrollLeft
andscrollTop
.Example:
onScrollStart = ({scrollLeft, scrollTop}) => { // do something with scrollLeft and scrollTop } render = () => ( <Scroller ... onScrollStart={this.onScrollStart} ... /> )
Called when scroll stops.
Passes
scrollLeft
andscrollTop
.Example:
onScrollStop = ({scrollLeft, scrollTop}) => { // do something with scrollLeft and scrollTop } render = () => ( <Scroller ... onScrollStop={this.onScrollStop} ... /> )
Specifies how to show vertical scrollbar.
Valid values are:
'auto'
,'visible'
, and'hidden'
.
Default: 'auto'