Skip to content

ScrollView

Refaltor77 edited this page Mar 29, 2026 · 1 revision

ScrollView

Scrollable container for content that exceeds the visible area.

Creation

use refaltor\ui\elements\ScrollView;

$scroll = ScrollView::create("my_scroll");

Orientation

$scroll->setOrientation(ScrollView::ORIENTATION_VERTICAL);   // Default
$scroll->setOrientation(ScrollView::ORIENTATION_HORIZONTAL);

Properties

Scroll Behavior

$scroll->setScrollSpeed(1.5);              // Scroll speed multiplier
$scroll->setTouchMode(true);               // Enable touch scrolling
$scroll->setAlwaysListenToInput(true);     // Always capture input
$scroll->setJumpToBottomOnUpdate(true);    // Auto-scroll to bottom (chat)
$scroll->setScrollbarTrackButton(false);   // Scrollbar track clickable

Scrollbar Controls

$scroll->setScrollViewPort("viewport");
$scroll->setScrollContent("content");
$scroll->setScrollBarTrack("track");
$scroll->setScrollBarBox("thumb");
$scroll->setScrollBarBoxTrack("thumb_track");
$scroll->setScrollBarBoxMiddleSize(8.0);
$scroll->setScrollSize("100%");

Complete Example — Vertical List

$scroll = ScrollView::create("item_scroll")
    ->setOrientation(ScrollView::ORIENTATION_VERTICAL)
    ->setScrollSpeed(1.5)
    ->setTouchMode(true)
    ->setSize(250, 180)
    ->setAnchorFrom(Element::ANCHOR_CENTER)
    ->setAnchorTo(Element::ANCHOR_CENTER);

$content = StackPanel::create("scroll_items")
    ->setOrientation(OrientationHelper::VERTICAL)
    ->setCustomSize(["100%", "default"]);

for ($i = 1; $i <= 20; $i++) {
    $content->addChild(
        Label::create("item_$i", "Item #$i")
            ->setSize(240, 20)->setShadow()
    );
}

$scroll->addChild($content);

Chat Window (Jump to Bottom)

$chat = ScrollView::create("chat_scroll")
    ->setOrientation(ScrollView::ORIENTATION_VERTICAL)
    ->setJumpToBottomOnUpdate(true) // New messages auto-scroll
    ->setScrollSpeed(1.0)
    ->setTouchMode(true)
    ->setSize(200, 100);

Horizontal Scroll

$hScroll = ScrollView::create("card_scroll")
    ->setOrientation(ScrollView::ORIENTATION_HORIZONTAL)
    ->setScrollSpeed(2.0)
    ->setTouchMode(true)
    ->setSize(300, 80);

$cards = StackPanel::create("card_row")
    ->setOrientation(OrientationHelper::HORIZONTAL)
    ->setCustomSize(["default", "100%"]);

// Add cards...
$hScroll->addChild($cards);

See Also

Clone this wiki locally