Shows a horizontal or vertical scrollbar.

<picture> <source srcset="scrollbar-dark.png" media="(prefers-color-scheme: dark)"> <img alt="An example GtkScrollbar" src="scrollbar.png"> </picture>

Its position and movement are controlled by the adjustment that is passed to or created by [ctor@Gtk.Scrollbar.new]. See [class@Gtk.Adjustment] for more details. The [property@Gtk.Adjustment:value] field sets the position of the thumb and must be between [property@Gtk.Adjustment:lower] and [property@Gtk.Adjustment:upper] - [property@Gtk.Adjustment:page-size]. The [property@Gtk.Adjustment:page-size] represents the size of the visible scrollable area.

The fields [property@Gtk.Adjustment:step-increment] and [property@Gtk.Adjustment:page-increment] fields are added to or subtracted from the [ property@Gtk.Adjustment:value] when the user asks to move by a step (using e.g. the cursor arrow keys) or by a page (using e.g. the Page Down/Up keys).

CSS nodes

``` scrollbar ╰── range[.fine-tune] ╰── trough ╰── slider ```

`GtkScrollbar` has a main CSS node with name scrollbar and a subnode for its contents. The main node gets the .horizontal or .vertical style classes applied, depending on the scrollbar's orientation.

The range node gets the style class .fine-tune added when the scrollbar is in 'fine-tuning' mode.

Other style classes that may be added to scrollbars inside [class@Gtk.ScrolledWindow] include the positional classes (.left, .right, .top, .bottom) and style classes related to overlay scrolling (.overlay-indicator, .dragging, .hovering).

Accessibility

`GtkScrollbar` uses the [enum@Gtk.AccessibleRole.scrollbar] role.