sandstone/Scroller

Provides Sandstone-themed scroller components and behaviors.

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

Members

ScrollerComponent

A Sandstone-styled Scroller, useScroll applied.

Usage:

<Scroller>Scroll me.</Scroller>
import Scroller from '@enact/sandstone/Scroller';
Properties
aria-label
String

The "aria-label" for the Scroller.

When aria-label is set and focusableScrollbar is byEnter, it will be used instead to provide an accessibility label for the Scroller.

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
'both''horizontal''vertical'

Direction of the scroller.

Default: 'both'
fadeOut
Boolean

Adds fade-out effect on the scroller.

Set this to true only if the content has no spottable but text.

Note: Fade-out effect will not show if the direction is set to both.

Default: false
focusableScrollbar
Boolean'byEnter'

Allows 5-way navigation to the scroll thumb.

By default, 5-way will not move focus to the scroll thumb. If true, the scroll thumb will get focus by directional keys. If 'byEnter', scroll thumb will get focus first by directional keys, then the scroll body will get focus by enter key or back key pressed on scroll thumb.

Default: false
horizontalScrollThumbAriaLabel
String

Sets the hint string read when focusing the scroll thumb in the horizontal scroll bar.

Default: $L('scroll up or down with up down button')
horizontalScrollbar
'auto''visible''hidden'

Specifies how to show horizontal scrollbar.

Default: 'auto'
id
String

Unique identifier for the component.

When defined and when the Scroller is within a Panel, the Scroller will store its scroll position and restore that position when returning to the Panel.

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
'native''translate'

Specifies how to scroll.

Default: 'native'
scrollbarTrackCss
Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

  • scrollbarTrack - The scrollbarTrack component class

  • thumb - The scrollbar thumb component class

verticalScrollThumbAriaLabel
String

Sets the hint string read when focusing the scroll thumb in the vertical scroll bar.

Default: $L('scroll left or right with left right button')
verticalScrollbar
'auto''visible''hidden'

Specifies how to show vertical scrollbar.

Default: 'auto'
ArrayBooleanFunctionModuleNumberObjectString