Qt Documentation

Qt 5.7
Qt Quick Controls 2
QML Types
ScrollBar QML Type

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:

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 }
}

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.