ScrollView

Previous Next

ScrollView

ScrollView

A scrollable container that allows content to exceed the visible bounds. ScrollView supports vertical, horizontal, or bidirectional scrolling with optional scroll indicators.

The scroll view automatically determines the content size based on its children and enables scrolling when the content exceeds the available space.

Constructor

nib.ScrollView(
    controls=None,
    axes="vertical",
    shows_indicators=True,
    **modifiers,
)

Parameters

Parameter Type Default Description
controls list[View] None Child views to display in the scrollable region. The content size is determined by the combined size of all children.
axes str "vertical" The scroll direction. Options: "vertical" (up/down), "horizontal" (left/right), "both" (bidirectional).
shows_indicators bool True Whether to display scroll indicators (scrollbars). Set to False for a cleaner appearance when indicators are not needed.
**modifiers Common view modifiers: padding, background, foreground_color, opacity, width, height, etc.

Methods

Method Description
scroll_to(target, anchor=None) Scroll so target is visible. target is a Ref, a view or a node id and must be a direct child. anchor is "top", "center" or "bottom".
scroll_to_top() Scroll to the top or leading edge.
scroll_to_bottom() Scroll to the bottom or trailing edge.

Examples

Vertical scrollable list

scrollview_vertical_scrollable_list

import nib


def main(app: nib.App):
    app.title = "Log"
    app.icon = nib.SFSymbol("text.alignleft")
    app.width = 360
    app.height = 290

    lines = [f"12:{i:02d}  GET /api/items/{i}  200" for i in range(60)]

    app.build(
        nib.VStack(
            controls=[
                nib.Text("Server log", font=nib.Font.HEADLINE),
                nib.ScrollView(
                    controls=[
                        nib.VStack(
                            controls=[
                                nib.Text(line, style=nib.TextStyle(monospaced=True))
                                for line in lines
                            ],
                            spacing=2,
                            alignment=nib.Alignment.LEADING,
                        )
                    ],
                    height=220,
                ),
            ],
            spacing=8,
            padding=16,
            alignment=nib.Alignment.LEADING,
        )
    )


nib.run(main)

scrollview_horizontal_scrolling_gallery

import nib


def main(app: nib.App):
    app.title = "Palette"
    app.icon = nib.SFSymbol("swatchpalette")
    app.width = 340

    swatches = [
        ("Coral", "#FF6B6B"),
        ("Mint", "#4ECDC4"),
        ("Sky", "#45B7D1"),
        ("Sage", "#96CEB4"),
        ("Sand", "#FFEAA7"),
        ("Plum", "#A29BFE"),
        ("Peach", "#FAB1A0"),
    ]

    app.build(
        nib.VStack(
            controls=[
                nib.Text("Swatches", font=nib.Font.HEADLINE),
                nib.ScrollView(
                    controls=[
                        nib.HStack(
                            controls=[
                                nib.VStack(
                                    controls=[
                                        nib.Rectangle(
                                            corner_radius=10,
                                            fill=color,
                                            width=80,
                                            height=80,
                                        ),
                                        nib.Text(name, font=nib.Font.CAPTION),
                                    ],
                                    spacing=4,
                                )
                                for name, color in swatches
                            ],
                            spacing=10,
                        )
                    ],
                    axes="horizontal",
                    shows_indicators=False,
                    width=300,
                ),
            ],
            spacing=8,
            padding=16,
            alignment=nib.Alignment.LEADING,
        )
    )


nib.run(main)
ZStack List