Enact
Edit on GitHub

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';
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.

  • {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. When false, no animation occurs.

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

    Note: Only specify one of: position, align, 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'
horizontalScrollbar
String

Specifies how to show horizontal scrollbar.

Valid values are:

  • 'auto',

  • 'visible', and

  • 'hidden'.

Default: 'auto'
noScrollByWheel
Boolean

Prevents scroll by wheeling on the scroller.

Default: false
onScroll
Function

Called when scrolling.

Passes scrollLeft, scrollTop. 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 and scrollTop.

Example:

onScrollStart = ({scrollLeft, scrollTop}) => {
    // do something with scrollLeft and scrollTop
}

render = () => (
    <Scroller
        ...
        onScrollStart={this.onScrollStart}
        ...
    />
)
onScrollStop
Function

Called when scroll stops.

Passes scrollLeft and scrollTop.

Example:

onScrollStop = ({scrollLeft, scrollTop}) => {
    // do something with scrollLeft and scrollTop
}

render = () => (
    <Scroller
        ...
        onScrollStop={this.onScrollStop}
        ...
    />
)
scrollMode
String

Specifies how to scroll.

Valid values are:

  • 'translate',

  • 'native'.

Default: 'translate'
verticalScrollbar
String

Specifies how to show vertical scrollbar.

Valid values are:

  • 'auto',

  • 'visible', and

  • 'hidden'.

Default: 'auto'

ScrollerBaseComponent

An unstyled base scroller component.

In most circumstances, you will want to use the Scrollable version.

import {ScrollerBase} from '@enact/ui/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 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. When false, no animation occurs.

  • {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'
horizontalScrollbar
String

Specifies how to show horizontal scrollbar.

Valid values are:

  • 'auto',

  • 'visible', and

  • 'hidden'.

Default: 'auto'
noScrollByWheel
Boolean

Prevents scroll by wheeling on the scroller.

Default: false
onScroll
Function

Called when scrolling.

Passes scrollLeft and scrollTop. 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 and scrollTop.

Example:

onScrollStart = ({scrollLeft, scrollTop}) => {
    // do something with scrollLeft and scrollTop
}

render = () => (
    <Scroller
        ...
        onScrollStart={this.onScrollStart}
        ...
    />
)
onScrollStop
Function

Called when scroll stops.

Passes scrollLeft and scrollTop.

Example:

onScrollStop = ({scrollLeft, scrollTop}) => {
    // do something with scrollLeft and scrollTop
}

render = () => (
    <Scroller
        ...
        onScrollStop={this.onScrollStop}
        ...
    />
)
verticalScrollbar
String

Specifies how to show vertical scrollbar.

Valid values are:

  • 'auto',

  • 'visible', and

  • 'hidden'.

Default: 'auto'

ScrollerBasicComponent

An unstyled base scroller component.

import {ScrollerBasic} from '@enact/ui/Scroller';
Properties
data-webos-voice-disabled
Boolean

Disable voice control feature of component.

data-webos-voice-focused
Boolean

Activates the component for voice control.

data-webos-voice-group-label
String

The voice control group label.

direction
String

Direction of the scroller.

Valid values are:

  • 'both',

  • 'horizontal', and

  • 'vertical'.

Default: 'both'
ArrayBooleanFunctionModuleNumberObjectString