Crate bevy_scrollbar 

Bevy plugin providing a scrollbar.

Getting started

First add bevy_scrollbar to your dependencies and the ScrollbarPlugin to your app.

Making a scrollbar

The two pieces of a scrollbar are referred to as the track and the thumb. You can turn an entity into a scrollbar (track) by adding Scrollbar { scrollable } to it, where scrollable is the entity Id of another node with overflowing content. This spawns the thumb as the child of the track along with three observers. See Scrollbar for more details.

Example 1

use bevy::{
    ecs::spawn::{SpawnIter, SpawnWith},
    prelude::*,
};
use bevy_scrollbar::{Scrollbar, ScrollbarPlugin};

fn main() {
    App::new()
        .add_plugins((DefaultPlugins, ScrollbarPlugin))
        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands) {
    commands.spawn(Camera2d);

    commands.spawn((
        // Container node for the overflowed node and its scrollbar that are usually siblings.
        Node {
            width: Val::Percent(100.0),
            height: Val::Percent(100.0),
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Center,
            ..default()
        },
        Children::spawn(SpawnWith(|container: &mut ChildSpawner| {
            // Overflowed node
            let scrollable = container
                .spawn((
                    Node {
                        height: Val::Percent(80.0),
                        border: UiRect::all(Val::Px(5.0)).with_right(Val::Px(2.5)),
                        // You can omit the overflow field for a vertical scrollbar
                        overflow: Overflow::scroll_y(),
                        flex_direction: FlexDirection::Column,
                        ..default()
                    },
                    BorderColor::all(Color::BLACK),
                    Children::spawn(SpawnIter(
                        (0..100).map(|i| Text::new(format!("  Scrolling {i}!  "))),
                    )),
                ))
                .id();

            // Scrollbar
            container.spawn((
                Scrollbar { scrollable },
                Node {
                    width: Val::Percent(1.5),
                    // Same height as the scrollable node
                    height: Val::Percent(80.0),
                    border: UiRect::all(Val::Px(5.0)).with_left(Val::Px(2.5)),
                    ..default()
                },
                BorderColor::all(Color::BLACK),
            ));
        })),
    ));
}

The Scrollbar / Scrollable relationship

The Scrollbar component implements Relationship with target Scrollable. This relates the Scrollbar node to the overflowed node to which Scrollable is added. This means Scrollable can be used to spawn a scrollbar (the same way Children can be used to spawn children). See example-2.

The Scrollable content

The Scrollable content responds to mouse Scroll triggers. You can configure how fast the content scrolls by adding ScrollSpeed to the Scrollable node. See example-2.

Thumb customization

Color and Drag speed of the thumb can be configured by adding ThumbColor and DragSpeed to the Scrollbar. See example-2.

Example 2

 use bevy::{ecs::spawn::SpawnIter, prelude::*};
 use bevy_scrollbar::{
     Scrollable, ScrollSpeed, ScrollbarPlugin, ThumbColor, DragSpeed,
 };

 fn main() {
     App::new()
         .add_plugins((DefaultPlugins, ScrollbarPlugin))
         .add_systems(Startup, setup)
         .run();
 }

 fn setup(mut commands: Commands) {
     commands.spawn(Camera2d);

     // Container of the scrollable content and its scrollbar
     let mut container = commands.spawn(Node {
         width: Val::Percent(100.0),
         height: Val::Percent(100.0),
         justify_content: JustifyContent::Center,
         align_items: AlignItems::Center,
         ..default()
     });
     let container_id = container.id();

     // Spawn the scrollable node
     container.with_child((
         Node {
             width: Val::Percent(80.0),
             height: Val::Percent(80.0),
             border: UiRect::all(Val::Px(5.0)),
             flex_wrap: FlexWrap::Wrap,
             // Ommitting the overflow field because the scrollbar is vertical
             ..default()
         },
         BorderColor::all(Color::BLACK),
         Children::spawn(SpawnIter((0..100).map(|i| {
             (
                 Node {
                     width: Val::Percent(20.0),
                     height: Val::Percent(20.0),
                     justify_content: JustifyContent::Center,
                     align_items: AlignItems::Center,
                     ..default()
                 },
                 Children::spawn_one(Text::new(format!("Scroll {i}!"))),
             )
         }))),
         // Customize scroll speed of the content
         ScrollSpeed(2.0),
         // Spawn the scrollbar
         Scrollable::spawn_one((
             // Add the scrollbar as a child of the container
             ChildOf(container_id),
             Node {
                 width: Val::Percent(1.5),
                 // Same height as the scrollable node
                 height: Val::Percent(80.0),
                 margin: UiRect::left(Val::Px(5.0)),
                 border: UiRect::all(Val::Px(5.0)),
                 ..default()
             },
             BorderColor::all(Color::BLACK),
             // The thumb will be spawned with the same border radius
             BorderRadius::all(Val::Px(10.0)),
             // Customize color of the thumb
             ThumbColor(Color::srgb(0.0, 0.0, 1.0)),
             // Customize drag speed of the thumb
             DragSpeed(4.0),
         )),
     ));
 }

Structs

DragSpeed

Component of a Scrollbar configuring how fast its thumb moves when dragged.

ScrollSpeed

Component of a Scrollable node configuring how fast its content scrolls when scrolling the mouse.

Scrollable

Component of a Node with overflowing content and linked to a Scrollbar.

ScrollableLineHeight

Component of a Scrollable node used to compute line height for mouse scroll.

Scrollbar

Component of a scrollbar Node.

ScrollbarPlugin

Plugin scheduling ScrollbarSystems after UiSystem::Layout in PostUpdate.

ScrollbarSystems

SystemSet containing the system updating the thumb of a Scrollbar.

ThumbColor

Component of a Scrollbar configuring the color of its thumb.