Scrollbar

Scrollbar is the visual companion to ScrollView.

Scrollbar

Smallest example

let bar = Scrollbar::new(ScrollbarOrientation::VerticalRight)
    .content_length(200)
    .viewport_length(20)
    .position(self.offset)
    .on_scroll(Message::ScrollTo)
    .build();

Use Scrollbar when

• you already have a scroll position
• users need a visual sense of where they are in long content

Key builder methods

• Scrollbar::new(...)
• .content_length(...)
• .viewport_length(...)
• .position(...)
• .symbols(...)
• .thumb_style(...), .track_style(...)
• .on_scroll(...)

State object

Use ScrollbarState when position and content length are maintained explicitly:

let state = ScrollbarState::new(200)
    .with_position(40)
    .with_viewport_content_length(20);
 
let bar = Scrollbar::new(ScrollbarOrientation::VerticalRight)
    .state(state)
    .build();

Where to see it in examples

• Scroll Sync: the clearest linked scrolling example