ScrollBar QML Type | Qt Quick Controls 2 5.7

Qt 5.7 | Qt Quick Controls 2 | QML Types | ScrollBar QML Type

Qt 5.7.1 Reference Documentation

# ScrollBar QML Type

An interactive scroll bar control. More...

Import Statement: | import QtQuick.Controls 2.0
Since: | Qt 5.7
Inherits: | Control

- List of all members, including inherited members

## Properties

- active : bool
- orientation : enumeration
- position : real
- pressed : bool
- size : real
- stepSize : real

## Attached Properties

- horizontal : ScrollBar
- vertical : ScrollBar

## Methods

- void decrease()
- void increase()

## Detailed Description

ScrollBar is an interactive bar that can be used to scroll to a specific position. A scroll bar can be either vertical or horizontal, and can be attached to any Flickable, such as ListView and GridView.

      Flickable {
          // ...
          ScrollBar.vertical: ScrollBar { }
      }

Note: When ScrollBar is attached vertically or horizontally to a Flickable, its geometry and the following properties are automatically set and updated as appropriate:

- orientation
- position
- size
- active

Notice that ScrollBar does not filter key events of the Flickable it is attached to. The following example illustrates how to implement scrolling with up and down keys:

      Flickable {
          focus: true

          Keys.onUpPressed: scrollBar.decrease()
          Keys.onDownPressed: scrollBar.increase()

          ScrollBar.vertical: ScrollBar { id: scrollBar }
      }

Horizontal and vertical scroll bars do not share the active state with each other by default. In order to keep both bars visible whilst scrolling to either direction, establish a two-way binding between the active states as presented by the following example:

      Flickable {
          anchors.fill: parent

          contentWidth: parent.width * 2
          contentHeight: parent.height * 2

          ScrollBar.horizontal: ScrollBar { id: hbar; active: vbar.active }
          ScrollBar.vertical: ScrollBar { id: vbar; active: hbar.active }
      }

See also ScrollIndicator, Customizing ScrollBar, and Indicator Controls.

## Property Documentation

active : bool

This property holds whether the scroll bar is active, i.e. when it's pressed or the attached Flickable is moving.

orientation : enumeration

This property holds the orientation of the scroll bar.

Possible values:

Constant | Description
--- | ---
`Qt.Horizontal` | Horizontal
`Qt.Vertical` | Vertical (default)

position : real

This property holds the position of the scroll bar, scaled to `0.0 - 1.0`.

See also Flickable::visibleArea.

pressed : bool

This property holds whether the scroll bar is pressed.

size : real

This property holds the size of the scroll bar, scaled to `0.0 - 1.0`.

See also Flickable::visibleArea.

stepSize : real

This property holds the step size. The default value is `0.0`.

See also increase() and decrease().

## Attached Property Documentation

ScrollBar.horizontal : ScrollBar

This property attaches a horizontal scroll bar to a Flickable.

      Flickable {
          contentWidth: 2000
          ScrollBar.horizontal: ScrollBar { }
      }

ScrollBar.vertical : ScrollBar

This property attaches a vertical scroll bar to a Flickable.

      Flickable {
          contentHeight: 2000
          ScrollBar.vertical: ScrollBar { }
      }

## Method Documentation

void decrease()

Decreases the position by stepSize or `0.1` if stepSize is `0.0`.

See also stepSize.

void increase()

Increases the position by stepSize or `0.1` if stepSize is `0.0`.

See also stepSize.