ScrollView#

ScrollView is a scrollable container. Maps to UI Toolkit's ScrollView.

Import#

import { ScrollView } from "onejs-react"

Basic Usage#

<ScrollView style={{ height: 300 }}>
    {items.map((item, i) => (
        <View key={i} style={{ padding: 10, borderBottomWidth: 1, borderColor: "#333" }}>
            <Label text={item.name} />
        </View>
    ))}
</ScrollView>

Props#

Basic Props#

Prop	Type	Default	Description
`mode`	`"Vertical"`, `"Horizontal"`, `"VerticalAndHorizontal"`	`"Vertical"`	Scroll direction
`horizontalScrollerVisibility`	`"Auto"`, `"AlwaysVisible"`, `"Hidden"`	`"Auto"`	Horizontal scrollbar visibility
`verticalScrollerVisibility`	`"Auto"`, `"AlwaysVisible"`, `"Hidden"`	`"Auto"`	Vertical scrollbar visibility
`style`	`ViewStyle`		Inline styles
`className`	`string`		USS class name(s)
`children`	`ReactNode`		Scrollable content

Scroll Behavior#

Prop	Type	Default	Description
`elasticity`	`number`	`0.1`	Elasticity for elastic touch scrolling
`elasticAnimationIntervalMs`	`number`	`16`	Interval for elastic animation in milliseconds
`scrollDecelerationRate`	`number`	`0.135`	Deceleration rate after touch release
`mouseWheelScrollSize`	`number`	`18`	Scroll distance per mouse wheel tick (WebGL builds use a smaller step to match their wheel smoothing; the prop overrides it)
`horizontalPageSize`	`number`		Page size for horizontal pagination
`verticalPageSize`	`number`		Page size for vertical pagination

Touch Behavior#

Prop	Type	Default	Description
`touchScrollBehavior`	`"Unrestricted"`, `"Elastic"`, `"Clamped"`	`"Clamped"`	How touch scrolling behaves at boundaries

Nested Scrolling#

Prop	Type	Default	Description
`nestedInteractionKind`	`"Default"`, `"StopScrolling"`, `"ForwardScrolling"`	`"Default"`	How nested ScrollViews interact

A child element can stop the ScrollView from scrolling while the pointer is over it by calling e.preventDefault() in an onWheel (or pointer) handler:

<ScrollView>
    <View onWheel={(e) => e.preventDefault()}>...</View>
</ScrollView>

Scroll Modes#

// Vertical scrolling (default)
<ScrollView mode="Vertical" style={{ height: 400 }}>
    {content}
</ScrollView>

// Horizontal scrolling
<ScrollView mode="Horizontal" style={{ width: 400 }}>
    <View style={{ flexDirection: "row" }}>
        {items.map(item => <Card key={item.id} data={item} />)}
    </View>
</ScrollView>

// Both directions
<ScrollView mode="VerticalAndHorizontal" style={{ width: 400, height: 400 }}>
    {largeContent}
</ScrollView>

Scrollbar Visibility#

// Always show scrollbar
<ScrollView verticalScrollerVisibility="AlwaysVisible">
    {content}
</ScrollView>

// Hide scrollbar
<ScrollView verticalScrollerVisibility="Hidden">
    {content}
</ScrollView>

// Auto (show when needed)
<ScrollView verticalScrollerVisibility="Auto">
    {content}
</ScrollView>

Chat Log Example#

function ChatLog({ messages }) {
    return (
        <ScrollView style={{ height: 400, backgroundColor: "#1a1a1a" }}>
            <View style={{ padding: 10 }}>
                {messages.map((msg, i) => (
                    <View key={i} style={{
                        padding: 10,
                        marginBottom: 10,
                        backgroundColor: msg.isMe ? "#0066cc" : "#333",
                        borderRadius: 8,
                        alignSelf: msg.isMe ? "flex-end" : "flex-start",
                        maxWidth: "80%",
                    }}>
                        <Label text={msg.text} style={{ color: "#fff" }} />
                    </View>
                ))}
            </View>
        </ScrollView>
    )
}

List Example#

function ItemList({ items, onSelect }) {
    return (
        <ScrollView style={{ height: 300 }}>
            {items.map((item) => (
                <View
                    key={item.id}
                    style={{
                        padding: 15,
                        borderBottomWidth: 1,
                        borderColor: "#333",
                    }}
                    onClick={() => onSelect(item)}
                >
                    <Label text={item.title} style={{ unityFontStyleAndWeight: "bold" }} />
                    <Label text={item.description} style={{ color: "#999", fontSize: 14 }} />
                </View>
            ))}
        </ScrollView>
    )
}

Horizontal Gallery#

function ImageGallery({ images }) {
    return (
        <ScrollView mode="Horizontal" style={{ height: 150 }}>
            <View style={{ flexDirection: "row" }}>
                {images.map((url, i) => (
                    <View key={i} style={{
                        width: 120,
                        height: 120,
                        marginRight: 10,
                        backgroundColor: "#333",
                        borderRadius: 8,
                    }}>
                        {/* Image component would go here */}
                    </View>
                ))}
            </View>
        </ScrollView>
    )
}