The scroll bar component can be used to draw a scroll bar to the scene by adding it to the graph. The scroll bar is used internally by the Scenic.Scrollable component and for most cases it is recommended to use the Scenic.Scrollable component instead.

The scroll bar can be setup to make use of scroll buttons at the scroll bars edges, in order to enable scrolling by pressing and holding such button, in addition to dragging the scroll bar slider control to drag, or clicking the slider background to jump.

Data

Scenic.Scrollable.ScrollBar.settings/0

The scroll bar requires the following data for initialization:

• width: number
• height: number
• content_size: number
• scroll_position: number
• direction: :horizontal | :vertical

Width and height define the display size of the scroll bar. The content size defines the size of the scrollable content in the direction of the scroll bar. When the scroll bar is a horizontal scroll bar, the content size should correspond to the width of the content. The scroll position specifies the starting position of the scrollable content. Note that the scroll position corresponds to the translation of the content, rather than the scroll bar slider. The direction specifies if the scroll bar scrolls in horizontal, or in vertical direction.

Styles

Scenic.Scrollable.ScrollBar.styles/0

Optional styles to customize the scroll bar. The following styles are supported:

• scroll_buttons: boolean
• scroll_bar_theme: map
• scroll_bar_radius: number
• scroll_bar_border: number
• scroll_drag: Scenic.Scrollable.Drag.settings/0

The scroll_buttons boolean can be used to specify of the scroll bar should contain buttons for scrolling, in addition to the scroll bar slider. The scroll buttons are not shown by default. A theme can be passed using the scroll_bar_theme element to provide a set of colors for the scroll bar. For more information on themes, see the Scenic.Primitive.Style.Theme module. The default theme is :light. The scroll bars rounding and border can be adjusted using the scroll_bar_radius and scroll_bar_border elements respectively. The default values are 3 and 1. The scroll_drag settings can be provided to specify by which mouse button the scroll bar slider can be dragged. By default, the :left, :right and :middle buttons are all enabled.

Examples

iex> graph = Scenic.Scrollable.Components.scroll_bar(
...>   Scenic.Graph.build(),
...>   %{
...>     width: 200,
...>     height: 10,
...>     content_size: 1000,
...>     scroll_position: 0,
...>     direction: :horizontal
...>   },
...>   [id: :scroll_bar_component_1]
...> )
...> graph.primitives[1].id
:scroll_bar_component_1

iex> graph = Scenic.Scrollable.Components.scroll_bar(
...>   Scenic.Graph.build(),
...>   %{
...>     width: 200,
...>     height: 10,
...>     content_size: 1000,
...>     scroll_position: 0,
...>     direction: :horizontal
...>   },
...>   [
...>     scroll_buttons: true,
...>     scroll_bar_theme: Scenic.Primitive.Style.Theme.preset(:dark),
...>     scroll_bar_radius: 4,
...>     scroll_bar_border: 1,
...>     scroll_drag: %{
...>       mouse_buttons: [:left, :right]
...>     },
...>     id: :scroll_bar_component_2
...>   ]
...> )
...> graph.primitives[1].id
:scroll_bar_component_2