ui/Scroller

Unstyled scroller components and behaviors to be customized by a theme or application.

Import Usage

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

Members

Scroller   Component

An unstyled scroller.

Example:

<Scroller>Scroll me.</Scroller>

Import Usage

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

Extends: ui/Scrollerui/Scroller.ScrollerBasic

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'

ScrollerBasic   Component

An unstyled base scroller component.

Import Usage

import {ScrollerBasic} from '@enact/ui/Scroller';

Properties

direction

String

Direction of the scroller.

Valid values are:

• 'both',

• 'horizontal', and

• 'vertical'.

Default: 'both'

---

animateScroll

any

Programmatically animates the native scroll position of node toward the target left/top offsets using requestAnimationFrame. It computes the scroll direction on each axis, then repeatedly calls scrollBy with a dynamic step (10% of remaining distance, minimum 8px) until the target is reached or 1s has elapsed. Used as a Chrome fallback when repeating a smooth scroll.